簡明扼要的HTML5入門課程(六):載入進度的顯示條

簡明扼要的HTML5入門課程(六):載入進度的顯示條
簡明扼要的HTML5入門課程(六):載入進度的顯示條

HTML5的新增元素比HTML4多了很多,其中一樣就是今天要介紹的載入進度顯示條~

和 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入門課程(四):嵌入音訊元素audio

簡明扼要的HTML5入門課程(五):嵌入影片元素video

重新學習UI UX Python課程 打好基礎輕鬆領高薪

Python課程讓你與AI接軌 不必擔心被科技取代

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *