HTML5 progress進度條詳解

progress是HTML5的一個新元素，表示定義一個進度條，用途很廣泛，可以用在文件上傳的進度顯示，文件下載的進度顯示，也可以作為一種loading的加載狀態條使用。

progress value= 70 max= 100 /progress

點擊這里查看html5 progress進度條的樣子。

max屬性表示進度條的進度最大值，如果有此值，必須是大于0的有效浮點數。max的默認值是1.

value屬性表示進度條完成的進度之，value值的范圍為0~max之間。如果沒有設置max屬性，那么value屬性值的范圍要在0~1之間。

如果沒有value值，那么完成進度是不確定的。這時候表示任務正在進行中，但不知道多長時間可以完成。這時候的progress在webkit瀏覽器中我們可以用作loading來使用，表示正在頁面加載中，或者ajax請求后臺數據中。

上圖截自chrome瀏覽器。

沒有設置value值的progress就像一個加載中loading，中間的進度塊來回游蕩。

沒有value的progress在window7下的模樣如下圖：

確實有點丑，不過是繼承了windows的典型風格。

progress在IE10+瀏覽器都支持

progress動畫效果模擬代碼如下：

 progress value= 0 max= 100 您的瀏覽器不支持progress元素 /progress  br/ br/  input type= button value= 開始 quot;goprogress() /  script  function goprogress(){ var pro=document.getElementsByTagName( progress )[0]; gotoend(pro,0); function gotoend(pro,value){ var value=value+1; pro.value=value; if(value 100) { setTimeout(function(){gotoend(pro, value);},20) }else{ setTimeout(function(){alert( 任務完成 )},20); /script 

點擊這里查看progress動畫模擬。

我們以實現一個progress的自定義樣式為例子，來講述progress有哪些樣式可以供我們設置。

我們要把progress改變成上面這種模樣。

代碼如下：

 progress value= 20 >

progress可以設置width，height，border等常用屬性。
對于IE10+，firefox瀏覽器，可以用background設置進度條的背景色。
對于webkit瀏覽器，使用::-webkit-progress-bar設置進度條的背景色。
對于IE10+，用::-ms-fill設置進度條完成進度的背景色。
對于firefox，用::-moz-progress-bar設置進度條完成進度的背景色。
對于webkit瀏覽器，使用::-webkit-progress-value設置進度條完成進度的背景色。

注意：::-webkit-progress-bar設置的是進度條的背景色，而::-moz-progres-bar設置的是進度條完成進度的背景色，正好是反著的。
 而且對于webkit瀏覽器，在IOS上要用-wekbit-appearance:none來清空progress的默認樣式，才能讓背景色，進度顏色起作用。
點擊這里，查看自定義progress進度條樣式。
html5 progress結語
我們可以在ajax2上傳文件中，upload.onprogress事件回調中使用progress可以很方便的顯示文件上傳的進度。也可以在FileReader預覽圖片中使用的onprogress事件中使用progress元素顯示圖片讀取的進度。
本文講解了HTML5 progress進度條，更多相關內容請關注php 。
相關推薦：
簡易 PHP+MySQL 分頁類
兩個不用遞歸的樹形數組構造函數
HTML轉Excel，并實現打印，下載功能
以上就是HTML5 progress進度條詳解的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。