progress 要素

progress 要素進捗状況を表す

progress 要素は進捗状況を表します。対応するブラウザでは、ゲージなど、直観的な形式で表示されます。

例えば処理の進捗状況や、バッテリーの充電率など、完了とされる値に対する現在の進捗を表すために使用します。人口比率など、特定範囲の数値における現在の数値を表す場合は、meter 要素を使用する方が妥当でしょう。

progress 要素の内容は、対応していない環境への代替コンテンツとなります。

カテゴリ

コンテンツモデル

ただし、progress 要素を子孫に持つことはできません。

この要素を使用できる文脈

フレージング・コンテンツが期待される場所

この要素で使用できる属性

progress 要素に指定可能な属性は下記の通りです。

属性	概要
value 属性	現時点での進捗状況を数値で指定します。指定できる値は浮動小数点数ですが、0以上、max 属性値以下である必要があります。なお、value 属性を持たない progress 要素は、「不定」、つまり「タスクは処理中だが、進捗状況が不明で完了までが予想できない状態」となります。
max 属性	完了となる値を指定します。省略された場合の初期値は「1.0」です。

対応するブラウザでは、プログレスバーが表示されます。

70 %

<p>
 ダウンロードの進捗： <progress max="100" value="30">30%</progress>
</p>