前端工程師的六個HTML5養成技巧(6)載入進度顯示條

前端工程師的HTML5養成技巧(6)載入進度顯示條

前端工程師的HTML5養成技巧(6)載入進度顯示條
前端工程師的HTML5養成技巧(6)載入進度顯示條

HTML5系列文章,最後要介紹”載入進度顯示條”給你!剩最後一哩路了加油!

 

比起 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養成技巧(1)七個內容模組

前端工程師的HTML5養成技巧(2)音訊元素介紹

前端工程師的HTML5養成技巧(3)六個語意元素介紹-上

近年大數據課程超夯!連屈臣氏也搶著報名上課?

從小開始學Python之小小AI工程師的網紅之路!! (上)

14歲就成為IBM工程師!! Python是主要成功的原因? (下)

達內課程先就業再付款- 中時電子報

發佈留言

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

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料