網頁設計之HTML5初級教學(2)-載入進度顯示條介紹

前端工程師愛用HTML5真的有許多元素都超好用,你知道其中的<progress>是可以輕鬆掌握網頁的載入進度哦!

說實在的，比起 HTML4，HTML5 新增的元素可說是應有盡有。其中還有 <progress> 元素，可以讓前端工程師可以用來顯示網頁的載入進度、或是上載、下載的進度等等。

假設要在 HTML5 中使用 <progress> 元素，載入進度條 (progress bar) 的語法與其結果範例如下：

See the Pen progress bar by Tedutw (@Tedutw) on CodePen.

一般前端工程師建議，如上述在HTML5中的 <progress> 標籤為例，最大值設定為 100%、最小值設定為 0%。其進度是固定在 22% (語法：<progress value="22" max="100">) 。如果希望進度條的進度能隨著網頁實際 loading 進度顯示的話，則必需配合 javascript 來設定。

HTML5新增元素目錄： HTML5的7個內容模組Content Models header,nav與footer元素 article,section與aside元素 audio影片嵌入元素 video影片嵌入元素 progress載入進度顯示條

更多閱讀:
網頁設計之HTML5初級教學(3)-video影片嵌入技巧

部落客必學的HTML5教學法寶一-免費網頁編輯器!

想要網頁美麗又吸睛?那你一定不能錯過今日HTML5教學!

達內課程先就業再付款- 中時電子報

達內教育評價-故事背後事實的真相甚麼是這樣?!

電腦選花生不稀奇~ 現在人工智慧還會養蝦呢!! 存活率大幅提升,蝦隻變大!!

醫生們要哭哭了!聽說Python課程也會治病?