<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;
}
| コンテンツカテゴリー | フローコンテンツ、 記述コンテンツ、ラベル付け可能コンテンツ、 知覚可能コンテンツ |
|---|---|
| 許可されている内容 |
記述コンテンツ。ただし、子要素に <progress> 要素を含めてはならない。
|
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | 記述コンテンツ を受け入れるすべての要素 |
| 暗黙の ARIA ロール | progressbar |
| 許可されている ARIA ロール | 許可されている role なし |
| DOM インターフェイス | HTMLProgressElement |
属性
この要素にはグローバル属性があります。
max-
この属性は、
progress要素で示すタスクで必要とする総作業量を設定します。max属性を指定する場合は、値を0より大きい有効な浮動小数点数値にしなければなりません。既定値は1です。 value-
この属性は、タスクの進捗状況を設定します。値は
0からmaxまでの間、またはmaxを省略する場合は0から1までの間の、有効な浮動小数点数値であることが必要です。value属性がない場合は、プログレスバーは不定、タスクは処理中であるものの完了までが予想できない状態になります。
メモ:
<meter> 要素とは異なり、最小値は常に 0 で、min 属性は <progress> 要素では許可されていません。
メモ:
:indeterminate 擬似クラスは、不定状態のプログレスバーに一致します。プログレスバーを値がある状態から不定の状態に変更するには、 element.removeAttribute('value') で value 属性を削除しなければなりません。
例
<progress value="70" max="100">70 %</progress>
結果
アクセシビリティの考慮
ラベル付け
<progress> を使用する場合、ふつうはアクセシビリティのあるラベルを提供しましょう。ARIA 標準のラベル付け属性 aria-labelledby や aria-label を role="progressbar" の要素と同様に使用できますが、<progress> を用いる場合、代わりに <label> 要素を使用することができます。
メモ: 要素のタグの間に配置されたテキストはアクセシビリティラベルではありません。この要素に対応していない古いブラウザー用の代替用としてのみ推奨されます。
例
<label>
文書をアップロード中: <progress value="70" max="100">70 %</progress>
</label>
<!-- OR -->
<br />
<label for="progress-bar">文書をアップロード中</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>
結果
仕様書
| Specification |
|---|
| HTML # the-progress-element |
ブラウザーの互換性
Loading…