progress要素

<progress>~</progress>

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

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

progress要素	説明
カテゴリー	・パルパブルコンテンツ・フレージングコンテンツ・フローコンテンツ・ラベル付け可能な要素
コンテンツモデル	フレージングコンテンツただし、progress 要素を子孫に持つことはできない。
使用できる場所	フレージングコンテンツが期待される場所

progress要素で使用できる属性

すべてのHTML要素で使用できる属性になります。

現時点での進捗状況を数値で指定する。指定できる値は浮動小数点数だが、0以上かつmax属性以下である必要がある。

完了となる値を指定する。省略さればあの初期値は「1.0」。

使用例

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

表示

ダウンロードの進捗：40%

使用例

<p>未確定プログレスバー：<progress>50%</progress></p>

表示

未確定プログレスバー：50%

カテゴリー：

タグ：