国际访客建议访问 Primers 编程伙伴 国际版站点 > HTML 教程 > progress 以获得更好的体验。

# HTML 的 <progress> 标签

请查看 HTML 元素帮助手册 了解更多 HTML 元素。

HTML中的 <progress> 元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式。

# 属性

请查看 HTML 元素的全局属性 了解 HTML 元素的全局属性。
  • max: 该属性描述了这个progress元素所表示的任务一共需要完成多少工作。

  • value: 该属性用来指定该进度条已完成的工作量。

    • 如果没有value 属性,则该进度条的进度为"不确定",也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时,下载对话框中的进度条就是这样的).

# 示例

<div class="progress-container">
    <label for="file-upload">当前进度(未知):</label>
    <!-- 不确定进度(不指定value) -->
    <progress id="file-upload" max="100"></progress>
</div>

<div class="progress-container">
    <label for="file-download">下载进度(65%):</label>
    <!-- 确定进度(指定value=65) -->
    <progress id="file-download" value="65" max="100">65%</progress>
</div>

# 推荐阅读

本文 更新于: 2025-11-27 09:38:04 创建于: 2025-11-27 09:38:04