一、progress元素基本了解

基本UI
progress元素屬于HTML5家族，指進度條。IE10+以及其他靠譜瀏覽器都支持。如下簡單code:

 progress o(︶︿︶)o /progress 

效果：

是個很帶感的進度條吧。有人奇怪：“唉~怎么我看到的是個字符表情捏？” 恩…我只能對你說：“鄙視你，丫的都舍不得用靠譜點的瀏覽器嗎？！”

這個默認的效果，不同瀏覽器下的效果不盡相同，如下截圖們（window 7下）：

IE10顆粒的緩動聚散效果，還是挺讓人眼前一亮的。

基本屬性
max, html' target='_blank'>value, position, 以及labels.

max指最大值。若缺省，進度值范圍從0.0~1.0，如果設置成max=100, 則進度值范圍從0~100.

value就是值了，若max=100, value=50則進度正好一半。value屬性的存在與否決定了progress進度條是否具有確定性。什么意思？比方說 progress /progress 沒有value，是不確定的，因此IE10瀏覽器下其長相是個無限循環的虛點動畫；但是，一旦有了value屬性（即使無值），如 progress value /progress , 也被認為是確定的，虛點動畫進入仙人模式—— 變條條了，如下截圖：

position是只讀屬性，顧名思意，當前進度的位置，就是value / max的值。如果進度條不確定，則值為-1.

labels也是只讀屬性，得到的是指向該progress元素的label元素們。例如document.querySelector( progress ).labels，返回的就是HTMLCollection, 下為我的某測試截圖（截自Opera瀏覽器下，目前FireFox18.0.2以及IE10貌似都不支持）：

二、progress元素的樣式控制

首先，很有意思的一點，無論哪個現代瀏覽器，只要設置了border或background-color樣式，進度條元素就會變成扁平化風格。

樣式控制的巨大差異
從標題可以看出這段是最碉堡的地方。大眾臉自然沒什么說頭，正因progress元素樣式的CSS控制差異之大，才成為了談資。

腦中梳理了下，想要三言兩語表述清楚好抓狂的來~ 求助外援，當當當當——表格君。

一般而言，一個進度條元素分為兩部分，背景條以及已完成的進度條。

二、progress元素的樣式控制

首先，很有意思的一點，無論哪個現代瀏覽器，只要設置了border或background-color樣式，進度條元素就會變成扁平化風格。

樣式控制的巨大差異
從標題可以看出這段是最碉堡的地方。大眾臉自然沒什么說頭，正因progress元素樣式的CSS控制差異之大，才成為了談資。

腦中梳理了下，想要三言兩語表述清楚好抓狂的來~ 求助外援，當當當當——表格君。

一般而言，一個進度條元素分為兩部分，背景條以及已完成的進度條。

結論：

使用progress{border:*; background:*;}可以控制所有瀏覽器下progress元素的邊框和背景色。其中，Chrome瀏覽器是個特例，直接的設置看不到效果（實際上支持），原因下面會解釋。

FireFox瀏覽器
已經完成的進度條，使用progress::-moz-progress-bar { }表示，這與Chrome瀏覽器是相反的。

Chrome瀏覽器
Chrome的表現與FireFox有著明顯的差異，其progress元素的結構似乎是這樣的：

progress┓ progress-value progress-bar

其中，progress-bar指全部的進度，progress-value指已經完成的進度。因此，Chrome瀏覽器下，已經完成的進度條，使用progress::-webkit-progress-value { }表示， FireFox瀏覽器下是*-bar. 而progress-bar默認含有背景色，因此，我們需要如下設置，以自定義背景色：

progress::-webkit-progress-bar { background: *; }

這也很好地解釋了上面的一個疑問？progress{background:*；}為什么不能讓progress元素背景色改變呢？不是不能改變，而是被progress-bar這個內部元素給覆蓋了，當我們設置：progress::-webkit-progress-bar { background: transparent; }的時候，progress{background:*；}設置的背景色就會顯露出來。

4.Opera瀏覽器
Opera似乎沒有什么::-o-progress-*{}的用法，因此，Opera瀏覽器，其已完成進度的背景色是無解的，只能使用默認的顏色——我的瀏覽器是和諧綠色。

IE10瀏覽器
IE10瀏覽器很奇葩的，它也可以設置已完成進度的背景色，使用的是color屬性，progress{color:*;} .

因此，綜上全部，我們可以使用類似下面的CSS實現最大兼容的自定義進度條樣式：

progress { width: 160px; border: 1px solid #0064B4;  background-color:#e6e6e6; color: #0064B4; /*IE10*/}progress::-moz-progress-bar { background: #0064B4; }progress::-webkit-progress-bar { background: #e6e6e6; }progress::-webkit-progress-value { background: #0064B4; }

您可以狠狠地點擊這里：progress元素樣式自定義最大兼容demo

三、實例效果展示

進度條可以用在頁面loading中（如gmail），或者文件上傳進度，或者視頻播放進度等。

為演示上面的自定義樣式，現在整合我之前折騰的HTML5文件上傳，做了個demo。

您可以狠狠地點擊這里：文件上傳進度與progress元素的樣式控制demo

選擇一個圖片（可以大一點的），然后點擊按鈕上傳（最好可以限速），就可以清楚看到進度變化，如下截圖：

關鍵部分的代碼：

onProgress: function(file, loaded, total) { var percent = Math.round(loaded / total * 100); $( progress ).val(percent);}

直接value賦值就有了進度動畫效果。傳統實現需要div嵌套，以及width控制等。優劣伯仲，一目了然。

四、淡淡的結束語

吃了個晚飯，不記得原本想要講的結束語了。想想~~恩……IE6~IE9瀏覽器不支持progress元素，我們可以通過嵌套其他元素的方法進行兼容，例如：

 progress div 這里寫兼容IE的東東 /div /progress 

支持progress的瀏覽器會忽略innerHTML，因此，內部的div可以放心大膽進行樣式處理，兼容低版本IE瀏覽器。

好的兼容做法
對于IE6~IE9瀏覽器，模擬進度條效果，如果不使用背景圖片的話，一般而言，至少需要2層標簽。我們需要再額外的徒增2層標簽？？No, no, no! 外部的progress標簽已經替我們做了一半的工作，因為，progress所對應的CSS樣式，也是IE6~9瀏覽器需要的（高寬，邊框色背景色什么的），因此，我們只需要再額外塞1層標簽就可以了，這個標簽對應的就是已經完成的進度條的樣式。

例如，如下的HTML設置：

progress max= 100 value= 20 ie >

我們需要怎樣的CSS代碼呢？如下，標紅的部分與兼容處理所增加的，都是無傷大雅，不需要hack補丁的。

progress { display: inline-block; width: 160px; height: 20px; border: 1px solid #0064B4;  background-color:#e6e6e6; color: #0064B4; /*IE10*/}/*ie6-ie9*/progress ie { display:block; height: 100%; background: #0064B4;}progress::-moz-progress-bar { background: #0064B4; }progress::-webkit-progress-bar { background: #e6e6e6; }progress::-webkit-progress-value { background: #0064B4; }

當然，progress以及自定義的ie元素，ie6~8都是不認識的，我們需要打個動態補丁，如下：

if (typeof window.screenX !== number ) { document.createElement( progress  document.createElement( ie }

于是，progress{}, ie{}的樣式就能被低版本IE識別，同時，單純作為普通元素處理（現代瀏覽器則會把ie標簽直接抹殺）。

耳聽為虛眼見為實，您可以狠狠地點擊這里：progress元素兼容IE6~IE9 demo

例如，IE6瀏覽器下，就是下面這個樣子：

如現代瀏覽器們長得一個模樣。因此，目前，在實際項目中使用progress元素是完全可行的，你還不趕快試試！

以上就是HTML5中progress元素的樣式控制兼容與實例的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。