<progress>：進度指示元素 - HTML：超文本標記語言 | MDN

Toggle sidebar

Theme

OS default
Light
Dark

正體中文 (繁體)

Remember language Learn more

<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 屬性。

範例

html

結果

無障礙議題

標記

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

結果

技術摘要

內容類別允許的內容標籤省略允許的父元素隱含的 ARIA 角色允許的 ARIA 角色 DOM 介面

流內容、段落型內容、可標記內容、捫及內容。

段落型內容，但其後代元素中不得有 <progress> 元素。

不允許，開始標籤和結束標籤均為必需。

任何接受段落型內容的元素。

progressbar

不允許 role

HTMLProgressElement

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年8月6日 by MDN contributors.

View this page on GitHub • Report a problem with this content