<progress>：進度指示元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<progress> HTML 元素顯示顯示任務完成進度的指示器，通常呈現為進度條。

嘗試一下

屬性

此元素包含全域屬性。

max

此屬性描述由 progress 元素指示的任務所需的工作量。如果存在 max 屬性，則其值必須大於 0 且為有效的浮點數。默認值為 1。

value

此屬性指定已完成的任務量。它必須是介於 0 和 max 之間的有效浮點數，如果省略 max，則必須介於 0 和 1 之間。如果沒有 value 屬性，則進度條是不確定的；這表示正在進行一項活動，而沒有指示預計需要多長時間。

备注： 與 <meter> 元素不同，最小值始終為 0，<progress> 元素不允許 min 屬性。

备注： 可以使用 :indeterminate 偽類來匹配不確定的進度條。要在給定值後將進度條更改為不確定，必須使用 element.removeAttribute('value') 刪除 value 屬性。

範例

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

結果

無障礙議題

標記

在使用 <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>
結果

技術摘要

內容類別 流內容、段落型內容、可標記內容、捫及內容。
允許的內容 段落型內容，但其後代元素中不得有 <progress> 元素。
標籤省略 不允許，開始標籤和結束標籤均為必需。
允許的父元素 任何接受段落型內容的元素。
隱含的 ARIA 角色 progressbar
允許的 ARIA 角色 不允許 role
DOM 介面 HTMLProgressElement

規範

Specification
HTML Standard
# the-progress-element

瀏覽器相容性

BCD tables only load in the browser

參見