<progress>: 进度指示器元素

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本上都能正常运行。它自 2015 年 7 月.

<progress> HTML 元素显示一个指示器，显示任务的完成进度，通常显示为进度条。

试一试

属性

此元素包括 全局属性.

max

此属性描述 progress 元素指示的任务需要多少工作量。如果存在 max 属性，则其值必须大于 0 且为有效的浮点数。默认值为 1。

value

此属性指定已完成的任务量。它必须是介于 0 和 max 之间的有效浮点数，或者如果省略 max，则介于 0 和 1 之间。如果没有 value 属性，则进度条将是不确定的；这表示正在进行一项活动，但没有指示预计需要多长时间。

注意：与 <meter> 元素不同，最小值始终为 0，并且 <progress> 元素不允许使用 min 属性。

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

可访问性

标签

在大多数情况下，使用 <progress> 时，您应该提供一个可访问的标签。虽然您可以使用标准的 ARIA 标签属性 aria-labelledby 或 aria-label，就像您对任何带有 role="progressbar" 的元素一样，使用 <progress> 时，您也可以使用 <label> 元素。

注意：元素标签之间的文本不是可访问的标签，仅建议作为不支持此元素的旧浏览器的备用方案。

示例

html
<label>
  Uploading Document: <progress value="70" max="100">70 %</progress>
</label>

<!-- OR -->
<br />

<label for="progress-bar">Uploading Document</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>

结果

描述特定区域

如果 <progress> 元素描述的是页面一部分的加载进度，请使用 aria-describedby 指向状态，并在正在更新的部分上设置 aria-busy="true"，加载完成后删除 aria-busy 属性。

示例

html
<div aria-busy="true" aria-describedby="progress-bar">
  <!-- content is for this region is loading -->
</div>

<!-- ... -->

<progress id="progress-bar" aria-label="Content loading…"></progress>
结果

示例

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

结果

技术概要

内容类别 流内容、短语内容、可标记内容、可感知内容。
允许内容 短语内容，但其后代中不能包含 <progress> 元素。
标签省略 无，开始和结束标签都是必需的。
允许的父元素 任何接受 短语内容 的元素。
隐式 ARIA 角色 progressbar
允许的 ARIA 角色 不允许使用 role
DOM 接口 HTMLProgressElement

规范

规范
HTML 标准
# the-progress-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅