HTML <progress> 标签

定义和用法

<progress> 标签表示任务的完成进度。

提示:请始终添加 <label> 标签 以获得最佳可访问性实践!

另请参阅:

HTML DOM 参考手册:Progress 对象

实例

显示进度条:

<label for="file">下载进度:</label>
<progress id="file" value="32" max="100"> 32% </progress>

亲自试一试

提示和注释

提示:<progress> 标记与 JavaScript 结合使用,可显示任务的进度。

注意:<progress> 标签不适合表示仪表(例如磁盘空间使用情况或查询结果的相关性)。如需表示仪表,请改用 <meter> 标签。

属性

属性 描述
max 数字 规定任务所需的总工作量。默认值为 1。
value 数字 规定任务已完成的部分。

全局属性

<progress> 标签还支持 HTML 中的全局属性

事件属性

<progress> 标签还支持 HTML 中的事件属性

默认的 CSS 设置

无。

浏览器支持

表中的数字注明了首个完全支持该标签的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 10.0 16.0 6.0 11.0