Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/zh-TW/docs/Web/HTML/Reference/Elements/progress below:

<progress>ï¼šé€²åº¦æŒ‡ç¤ºå…ƒç´ - HTML：超文本標記語言 | MDN

Baseline Widely available

<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>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4