試一試
<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> 元素不同，<progress> 元素的最小值始終為 0，並且不允許使用 min 屬性。
注意： :indeterminate 偽類可用於匹配未確定的進度條。要將進度條在賦予其值後更改為未確定狀態，必須使用 element.removeAttribute('value') 移除 value 屬性。
無障礙
標籤
在大多數情況下，在使用 <progress> 時應提供可訪問的標籤。雖然您可以像使用 role="progressbar" 的任何元素一樣使用標準的 ARIA 標籤屬性 aria-labelledby 或 aria-label，但在使用 <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 |
瀏覽器相容性
載入中…