<progress>要素

<progress>要素

英語で「進捗」を意味する”progress”より。
処理の進行状況を示す、プログレスバーとしてよく表示されます。

子要素として使えるもの

記述コンテンツが使用できますが、<progress> 要素を入れ子にすることは出来ません。

親要素として使えるもの

記述コンテンツを受け入れるすべての要素

許可されているARIAロール

なし

DOMインターフェース

HTMLProgressElement

属性

グローバル属性が指定できます。

max

<progress> 要素で示すタスクで必要とする総作業量を設定します。max 属性を指定する場合は、値を 0 より大きい有効な浮動小数点数値にしなければなりません。既定値は 1 です。

value

タスクの進捗状況を設定します。値は 0 から max までの間、または max を省略する場合は 0 から 1 までの間の、有効な浮動小数点数値であることが必要です。value 属性がない場合は、プログレスバーは不定、タスクは処理中であるものの完了までが予想できない状態になります。

サンプル

See the Pen progress by Masahiko Iwakiri (@m-iwakiri) on CodePen.


 

このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs: https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
HTML要素や属性がどのブラウザに対応しているのかは、下記のサイトで確認できます。
Can I Use?: https://caniuse.com/#home

コメント

タイトルとURLをコピーしました