更新时间:2014年4月20日

progress元素(进度)【新元素

<progress value=" " max=" ">~</progress>

progress元素用于表示任务的进度。使用两个值表示进度率,一个是任务完成时的值,一个是正在进行的值,用视图表现两个值的比率。达到直观的效果。单纯使用progress元素实现静态的直观图,如果想实现动态效果,要使用JavaScript。

progress元素中使用value内容属性指定当前任务进度值,使用max指定最大值。所以当要表现“百分之三十”的进度时,value内容属性的值就是0.3。

value内容属性与max内容属性必须指定0以上的数值。如果max内容属性的值省略,默认最大值为1,这时,value属性的值必须是0~1之间的值。

value内容属性的值可以省略,这时被当做不确定的进度条进行处理。经常用于表示进行中。

属性

1、value内容属性
指定当前任务进度值。
2、max内容属性
指定任务完成后的值。
3、form内容属性
指定与该元素建立链接的表单的id值。

使用例

<p>进展使用图:<progress value="0.3" max="1">百分之三十</progress></p>

<p>进展使用图:<progress max="1">进行中</progress></p>

浏览器上的显示结果↓



进展使用图:百分之三十

进展使用图:进行中

X

浏览器支持情况

元素
video 10.0 8.0 16.0 6.0 11.0