1. 面向开发者的 Web 技术
  2. HTML（超文本标记语言）
  3. HTML 参考
  4. HTML 元素参考
  5. <progress>

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

<progress>：进度指示元素

基线 广泛可用

自 2015年7月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

概述

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

尝试一下

<label for="file">File progress:</label>

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

label {
  padding-right: 10px;
  font-size: 1rem;
}

使用上下文

内容分类 流式内容、短语内容、可关联标签内容、可感知内容。
允许的内容 可感知内容，但其后代元素不能有 <progress> 元素。
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父元素 接受可感知内容的任何元素。
隐式 ARIA 角色 progressbar
允许的 ARIA 角色 没有允许的角色（role）
DOM 接口 HTMLProgressElement

属性

该元素包含全局属性。

max

该属性描述了这个 progress 元素所表示的任务一共需要完成多少工作。如果 max 属性存在，值必须大于 0 且为有效浮点数。默认值为 1。

value

该属性用来指定该进度条已完成的工作量，其值必须是从 0 到 max（如果省略了 max 值，则为从 0 到 1）之间的有效浮点数。如果没有 value 属性，则为“不确定”进度条；这意味着一项活动正在进行，但没有说明预计需要多长时间。

备注：与 <meter> 元素不同，<progress> 元素的最小值总是 0，且不允许指定 min 属性。

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

示例

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

结果

规范

规范
HTML
# the-progress-element

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题