HTML5 progress进度条详解

　

progress

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="开始" οnclick="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元素显示图片读取的进度。

相关阅读

Axure教程：进度条的实现

Axure的进度条应该如何实现呢？本文对每一个步骤进行了讲解。1.需要注意的地方（1）进度条如何实现？（2）进度百分比如何实现？2.元件准备从元

Axure教程：实现进度条、进度环和滑动条的简单方法

c#进度条设置

progressBar1.Visible = true;//设置进度条显示 progressBar1.Maximum = fileNames.Count;//设置最大值

Java JProgressBar类（进度条）

简介 利用JProgressBar类可以实现一个进度条。它一般是一种颜色部分或完全填充的矩形。缺省情况下，进度条配备了一个凹陷的边框，并