HTML5 progress进度条详解

HTML5 progress 元素简介

progress是HTML5的一个新元素，表示定义一个进度条，用途很广泛，可以用在文件上传的进度显示，文件下载的进度显示，也可以作为一种loading的加载状态条使用。

<progress value= "0"   max= "100" >您的浏览器不支持progress元素</progress>
<br/><br/>
<input type= "button"  value= "开始"  onclick= "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>

html5 progress兼容性

<progress value= "20"  class= "mypro"   max= "100" >
     您的浏览器不支持progress元素
</progress>
 
.mypro{
     background:orange;
     border:1px solid red;
     border:2px solid  #000;
     width:300px;
     height:50px;
     -webkit-appearance: none;
  }
::-ms-fill{
     background:deeppink;
}
::-moz-progress-bar{
     background:deeppink;
  }
::-webkit-progress-bar{
     background:orange;
  }
::-webkit-progress-value{
     background:deeppink;
  }