用Progress元素来实现进度条

用Progress元素来实现进度条

---

本文参考自the progress element以及张鑫旭大神的博文HTML5 progress元素的样式控制、兼容与实例

首先progress元素的唯一作用就是提供进度条，它能够简化进度条的创建，只需要一个progress标签就能够解决原来我们需要嵌套各种div标签的进度条写法。

Attributes

progress有4个属性分别是max、value、position、以及labels

notes：

• 如果value值存在则进度条是确定的也就是是说现在进度条是指向value所提供的值的。
• 如果max值没有提供，那么默认的取值范围是从0.0-1.0
• 推荐把value和max默认值放在progress元素中，这样的话可以 兼容旧版浏览器

value：是用来表示任务进度的浮点数，这个值必须在0.0和1.0之间或者是在max值以下。

positon：这是一个只读的属性，其返回progress元素的当前位置，这个值等于value／max的值，如果值为-1则表示这时候progress的位置是不可确定的。

Lables：这个值也是一个只读的值，它代表的是progress的标签列表（如果有）。

Max：是一个代表progress完成的一个浮点数默认值是1.0.

Example

一个简单的progress 的例子

简单的不确定进度条

<progress id="p"></progress>

简单的确定进度条

<progress id='p' max='70'><span>0</span>&</progress>

var pBar = document.getElementById('p');
var updataProgress = function(value){
  pBar.value = value;
  pBar.getElementByTagName('span')[0].innerHTML = Math.floor(100/70)*vlaue;
}

在HTML5 Video 中使用 progress：

可以用来作为播放进度的进度条

<progress id='p' max='100' value='0' ><span>o</span>%played</progress>

var video = document.getElementById('v');
var pBar = document.getElementById('p');
video.addEventListener('timeUpdate',function(){
  var percent = Math.floor(100/video.duration)*video.currentTime;
  pBar.value = percent;
  pBar.getElementsByTagName('span')[0].innerHTML = percent;
},false);

用progress来表示上传文件进度

var p = document.getElementById('p');
var reader = new FileReader();
reader.addEventListener('loadStart',function(evt){
  if(evt.lengthComputable) p.value = evt.loaded;
},false);

浏览器兼容

Progress 兼容如今的大多数现代浏览器，IE10+，Safari6+

设置样式

不同的浏览器有不同的内置样式所以想要在每个浏览器上都获得同样的表现的话，我们要自己设置progress的样式来覆盖掉默认样式。

progree{
  color:#06a;
  font-size:.6em;
  line-height:1.5em;
  text-indent:.5em;
  width:15em;
  height:1.8em;
  border:1px solid #06a;
  background:#fff;
}
/*内部进度条样式设置*/
/*firefox*/
progress::-moz-progress-bar{
  background:#06af;
}
/*safari*/
progress::-webkit-progress-bar{
  background:#06af;
}
/*chrome*/
progress::-moz-progress-value{
  background:#06af;
}