HTML5 progress进度条详解

发布时间：09/01 来源：未知浏览：关键词：

HTML5 progress进度条详解

HTML5 progress 元素简介

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

html5 progress进度条语法

<progress value='70' max='100'></progress>

点击这里查看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动画结果模拟代码如下：

<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动画模拟。

html5 progress相关样式设定

我们以实现一个progress的自定义样式为例子，来讲述progress是什么样式可以供我们设定。

我们要把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;
 }

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