<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

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

備註:<meter> 元素不同,最小值始終為 0,<progress> 元素不允許 min 屬性。

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

範例

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

結果

無障礙議題

標記

在使用 <progress> 時,通常應提供無障礙的標籤。雖然可以使用標準的 ARIA 標記屬性 aria-labelledbyaria-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

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
progress
max
value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

參見