<progress>

HTMLの<progress>タグを使うと、進捗状況を表わすプログレスバーを表示できる。

使い方

<progress>
  Processing
</progress>

開始タグと終了タグの間の文字列は表示されない。

ラベルを付けることもできる。

<label for="install">
  進捗状況
</label>
<progress id="install">
</progress>

進捗状況

<progress> とほぼ同じ機能を持つタグとして、<meter> がある。

<progress> タグには次の属性を指定できる。

value

現在の値を指定する。value属性の指定を省略した場合は不定となる。

<progress value="0.8">
</progress>

max

プログレスバーが取り得る範囲の上限値を指定する。max属性の指定を省略した場合、上限値は1となる。

<progress value="3" max="5">
</progress>

class

CSSのクラスを指定する。

id

一意な識別子を指定する。

style

CSSのプロパティを指定する。

<progress value="0.8" style="height:2rem;">
</progress>

title

プログレスバーのタイトルを指定する。

<progress value="0.5" title="0.5">
</progress>

progress要素は次のコンテンツモデルに属する。