HTML <progress> 元素

引进于 HTML5

HTML <progress> 元素表示任务的完成进度，通常显示为进度条。

使用 <progress> 元素表示下载进度：

<progress value="22" max="100"></progress>

尝试一下 »

截图

使用 <progress> 元素表示下载进度

特性

内容类别 流式内容，短语内容，labelable content，可触知内容。
允许的内容 短语内容，但其后代中不能有 <progress> 元素。
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父元素 任何接受短语内容的元素。
允许的 ARIA 角色 无
DOM 接口 HTMLProgressElement

属性

该元素包含了全局属性。

max

该属性描述了 progress 元素所要求的任务所需的工作量。如果设置了该属性，其值必须是大于 0 的浮点数。默认值为 1。

value

该属性指定已完成的任务数量。它必须是 0 和 max 之间的有效浮点数，或者如果未设置 max ，则在 0 和 1 之间。如果没有 value 属性，进度条是不确定的; 这表明活动正在进行，没有指示预计需要多长时间。

注意： 最小值始终为 0，进度元素不允许使用 min 属性。您可以使用 -moz-orient CSS 属性来指定进度条是否应水平（默认）或垂直呈现。

注意： :indeterminate 伪类可用于匹配不确定值的进度条。要在给定值之后将进度条更改为不确定，您必须使用 element.removeAttribute("value") 删除 value 属性

事件属性

<progress> 元素支持 HTML 的事件属性。

使用注意

<progress> 元素适合与 JavaScript 一起使用来显示任务的进度。

<progress> 元素不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 <meter> 元素代替。

更多实例

使用 <progress> 元素表示 70% 的下载进度

<progress value="70" max="100">70 %</progress>

尝试一下 »

截图

使用 <progress> 元素表示 70% 的下载进度

在 Windows 7 上，生成的进度如下所示：

progress-firefox.JPG

更多实例

请参阅 -moz-orient。

规范

规范 状态 备注
HTML Living Standard
<progress> 的定义		 现行的标准 -
HTML5
<progress> 的定义		 推荐 初始定义

HTML 4.01 与 HTML5 之间的差异

<progress> 元素是 HTML5 中的新元素。

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 6 支持 612 10 11 5.2
max 6 支持 6 10 11 5.2
value 6 支持 6 10 11 5.2

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 支持 612 不支持 11 73
max 支持 支持 支持 6 不支持 11 7
value 支持 支持 支持 6 不支持 11 7

1. 在 Firefox 14 之前，<progress> 元素被错误地分类为一个表单元素，因此具有一个 form 属性。这已经解决了。

2. Firefox 提供了 ::-moz-progress-bar 伪元素，它允许您对进度条的内部部分设置样式，表示迄今为止完成的工作量。

3. iOS 上的 Safari 不支持不确定的进度条（它们呈现为 0％ 完成度的进度条）。

相关链接