<progress>:进度指示器元素

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

max

该属性描述了 progress 元素指示的任务需要多少工作。max 属性（如果存在）的值必须大于 0 并且是有效的浮点数。默认值为 1。

value

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

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

¥Note: Unlike the <meter> element, the minimum value is always 0, and the min attribute is not allowed for the <progress> element.

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

¥Note: The :indeterminate pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeAttribute('value').

¥Examples

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

¥Result

¥Accessibility concerns

¥Labelling

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

¥In most cases you should provide an accessible label when using <progress>. While you can use the standard ARIA labelling attributes aria-labelledby or aria-label as you would for any element with role="progressbar", when using <progress> you can alternatively use the <label> element.

注意：放置在元素标签之间的文本不是可访问的标签，仅建议将其作为不支持此元素的旧浏览器的后备。

¥Note: Text placed between the element's tags is not an accessible label, it is only recommended as a fallback for old browsers that do not support this element.

示例

¥Examples

<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>

结果

¥Result

¥Describing a particular region

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

¥If the <progress> element is describing the loading progress of a section of a page, use aria-describedby to point to the status, and set aria-busy="true" on the section that is being updated, removing the aria-busy attribute when it has finished loading.

示例

¥Examples

<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>

结果

¥Result

¥Technical summary

¥See also

• 创建垂直表单控件
• <meter>
• :indeterminate
• -moz-orient
• ::-moz-progress-bar
• ::-webkit-progress-bar
• ::-webkit-progress-value
• ::-webkit-progress-inner-element