一、progress元素基本了解
1.基本知識
progress元素屬於HTML5家族，指進度條。IE10+以及其他靠譜瀏覽器都支持。
注釋：Internet Explorer 9 以及更早的版本不支持 <progress> 標簽。
<progress> 標簽標示任務的進度（進程）
2.基本屬性
max, value, position, 以及labels.
（1）max指最大值。若缺省，進度值范圍從0.0~1.0，如果設置成max=100, 則進度值范圍從0~100.
（2）value就是值了，若max=100, value=50則進度正好一半。value屬性的存在與否決定了progress進度條是否具有確定性。
比方說<progress></progress>沒有value，是不確定的，因此IE10瀏覽器下其長相是個無限循環的虛點動畫；
但是，一旦有了value屬性（即使無值），如<progress value></progress>, 也被認為是確定的，
（3）position是只讀屬性，當前進度的位置，就是value / max的值。如果進度條不確定，則值為-1.
（4）labels也是只讀屬性，得到的是指向該progress元素的label元素們。例如document.querySelector("progress").labels，返回的就是HTMLCollection。
二、progress元素兼容性處理示例
<p class="progressbar"><progress max="100" value="10"><ie style="width:10%;"></ie></progress></p>
樣式：progress {display: inline-block;width:100%;height: 5px;border-radius: 5px;overflow: hidden;float: left;}
/*ie6-ie9*/
progress ie {display:block;height: 100%;background: #ff8a00; }
progress::-moz-progress-bar { background: #ff8a00; }
progress::-webkit-progress-bar { background: #e5e5e5; }
progress::-webkit-progress-value { background: #ff8a00; }