html5 进度条

通常在上传文件，播放视频，加载数据的时候我们都需要用进度条来向用户提供及时的信息反馈。刚好，html5提供了一个progress的标签来支持这个功能。

progress包含4个属性：max, value, position, 和 labels

1 value 如果该值属性存在，则该进度条被认为是确定的（即它有确切的限制）。否则，它被认为是不确定的。

2 max 如果不存在该属性，默认进度范围为 0.0 到 1.0

3 position 该属性read-only属性 值为value/max

4 labels 该属性read-only属性 返回一个list

代码

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

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

会实时的显示当前进度 title

 

 

irrelevant 无关的

出处 http://html5doctor.com/the-progress-element/