HTML5菜鳥入門課程(6)-progress載入進度顯示條－重金屬AI工程師的Coding分享

HTML5菜鳥入門課程(6)-progress載入進度顯示條

想轉職程式工程師的你,一定不能錯過本HTML5基礎系列!本篇是(6)-progress載入進度顯示條.

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

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

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

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

HTML5新增元素目錄：

參考連結:

IzzySixxi

重金屬AI工程師的Coding分享

IzzySixxi 發表在痞客邦留言(0) 人氣()

E-mail轉寄

重金屬AI工程師的Coding分享