HTML5progress进度条详解

<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>

<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;
 }

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进度条，更多相关内容请关注Gxl网。