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

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

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新增元素目錄:

 

 

  1. HTML5的7個內容模組Content Models
  2. header,nav與footer元素
  3. article,section與aside元素
  4. audio影片嵌入元素
  5. video影片嵌入元素
  6. progress載入進度顯示條

 

 

 

參考連結:

HTML5入門基礎課程(5)-video影片嵌入

HTML5入門基礎課程(7)-Web Storage 瀏覽器儲存

HTML5入門基礎課程(8)-Geolocation API簡介

前端工程師課程再進化-Media Query的CSS插入字條件

前端工程師課程再進化-Media Query的媒體類型

前端工程師課程再進化-Media Query的流動圖片

美國NASDAQ上市公司、外商IT教育培訓企業

最後修改日期: 2019-06-11