
天天在用HTML5的前端工程師知道有個新增元素叫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新增元素目錄:
|
其他閱讀
前端工程師必備HTML5入門課程:用新的元素排版俐落又精簡!