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