<progress>：進度指示元素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<progress> HTML 元素顯示顯示任務完成進度的指示器，通常呈現為進度條。
嘗試一下
<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>
label {
padding-right: 10px;
font-size: 1rem;
}
屬性
此元素包含全域屬性。
max-
此屬性描述由
progress元素指示的任務所需的工作量。如果存在max屬性，則其值必須大於0且為有效的浮點數。默認值為1。 value-
此屬性指定已完成的任務量。它必須是介於
0和max之間的有效浮點數，如果省略max，則必須介於0和1之間。如果沒有value屬性，則進度條是不確定的；這表示正在進行一項活動，而沒有指示預計需要多長時間。
備註：
與 <meter> 元素不同，最小值始終為 0，<progress> 元素不允許 min 屬性。
備註：
可以使用 :indeterminate 偽類來匹配不確定的進度條。要在給定值後將進度條更改為不確定，必須使用 element.removeAttribute('value') 刪除 value 屬性。
範例
<progress value="70" max="100">70 %</progress>
結果
無障礙議題
標記
在使用 <progress> 時，通常應提供無障礙的標籤。雖然可以使用標準的 ARIA 標記屬性 aria-labelledby 或 aria-label，就像對任何具有 role="progressbar" 的元素一樣，但在使用 <progress> 時，你還可以使用 <label> 元素。
備註： 放置在元素標籤之間的文本不是可訪問的標籤，它只建議作為不支持該元素的舊瀏覽器的後備。
範例
<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 屬性。
範例
<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 # the-progress-element |
瀏覽器相容性
Loading…