作業の進捗を表す

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

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

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

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

数値の書式

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

浮動小数点数

0.7、7、7E+2

• value属性は 0 以上、max属性は 0 より大きい数値で指定します。
• 小数点以下の数値を指定する場合は、ピリオド（ . ）に続けて記述します。
• 指数表記も使えます。（E または e を付けます）

<progress value="0.7"></progress>
<progress value="7" max="10"></progress>

value属性について

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

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

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

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

max属性が指定されていない場合は、0 ～ 1 の範囲で指定します。次の例も、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要素に対応しているブラウザでは、この要素の内容は表示されません。