<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 表格僅在瀏覽器中載入