<progress></progress>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / ラベル付け可能 / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ(ただし、progress要素は含められない)

progress要素は、作業の進捗状況を表します。


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

<progress value="50" max="100">50%</progress>

属性
任意属性
value="" 現時点の進捗状況 数値 0以上 ~ max属性値以下(浮動小数点数)
max="" 全体の作業量 数値 0より大きい値(浮動小数点数、既定値は 1
  • max属性が省略された場合は、value属性の値は 01 の範囲で指定します。(max属性の既定値が 1 なので)

progress要素に対応しているブラウザでは、進捗状況がプログレスバーで表示されます。

例えば、この要素をスクリプトと組み合わせることで、進捗状況をリアルタイムで表示することが可能になります。また、複数のページで構成されるフォームなどでも、現在の進捗状況を伝えるのに役立てることができます。

  • progress要素は、フォーム以外の用途にも使用することができます。

数値の書式

value属性max属性の値は、次の書式で記述する必要があります。

浮動小数点数
0.777E+2
  • value属性は 0 以上、max属性は 0 より大きい数値で指定します。
  • 小数点以下の数値を指定する場合は、ピリオド( . )に続けて記述します。
  • 指数表記も使えます。(E または e を付けます)
<progress value="0.7"></progress>
<progress value="7" max="10"></progress>

value属性について

value属性は、現時点の進捗状況を 0 以上の数値で指定します。

同時にmax属性が指定されている場合は、その値以下の数値で指定します。例えば max="100" になっている場合は、0100 の範囲で指定することになります。

次の例では、7割の作業が完了していることを示しています。

<progress value="70" max="100"></progress>

max属性が指定されていない場合は、01 の範囲で指定します。次の例も、7割の作業が完了していることを示しています。

<progress value="0.7"></progress>

value属性がないprogress要素は、進捗状況が確定していないことを表します。この場合、そのプログレスバーは未確定プログレスバーになります。

<progress></progress>

max属性について

max属性は、全体の作業量を 0 より大きい数値で指定します。既定値は 1 になります。

次の例では、全体の作業量 300 に対して、3割の作業が完了していることを示しています。

<progress value="90" max="300"></progress>

progress要素の内容について

progress要素の内容は、この要素に対応していないブラウザ向けの代替コンテンツになります。

この代替コンテンツには、進捗状況が伝わる内容を記述しておくことが推奨されています。

<progress value="70" max="100">70%</progress>

<progress value="7" max="10">7/10</progress>
  • progress要素に対応しているブラウザでは、この要素の内容は表示されません。
旧HTMLからの変更点
  • HTML5:progress要素が定義されました。

使用例


<p><progress value="0" max="100">0%</progress> (0%)</p>

<p><progress value="30" max="100">30%</progress> (30%)</p>

<p><progress value="100" max="100">100%</progress> (100%)</p>

<p><progress>待機中</progress> (未確定)</p>

表示例

0% (0%)

30% (30%)

100% (100%)

待機中 (未確定)

  • ブラウザの種類やバージョンにより、プログレスバーのデザインは異なります。