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