close

踏入前端工程師領域必備的九堂 HTML5 課(六)-progress載入進度顯示條
踏入前端工程師領域必備的九堂 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新增元素目錄:

 

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

 

 

 

✌推薦閱讀:

 

新手前端工程師需要的 HTML5 入門課 (一)

 

新手前端工程師需要的 HTML5 入門課 (二)

 

新手前端工程師需要的 HTML5 入門課 (三)

 

新手前端工程師需要的 HTML5 入門課 (四)

 

新手前端工程師需要的 HTML5 入門課 (五)

 

Java課程讓我百萬年薪科技新貴之路只需要六個月!

 

還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!

arrow
arrow

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