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

html5 progress進度條語法

html5 progress 屬性

progress max

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

progress value

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

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

上圖截自chrome瀏覽器。

沒有設定value值的progress就像一個載入中loading，中間的進度塊來回遊蕩。

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

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

html5 progress相容性

progress在IE10+瀏覽器都支援

html5 progress 進度效果展示

progress動畫效果模擬程式碼如下：

html5 progress相關樣式設定

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

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

程式碼如下：

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的預設樣式，才能讓背景色，進度顏色起作用。

html5 progress結語

我們可以在ajax2上傳檔案中，upload.onprogress事件回撥中使用progress可以很方便的顯示檔案上傳的進度。也可以在FileReader預覽圖片中使用的onprogress事件中使用progress元素顯示圖片讀取的進度。