<progress> …… タスクの進行状況を表す

<progress>タグは、タスクの進行状況を表す際に使用します。

progress要素のvalue属性は、これまでに完了した作業量の割合を表します。 value属性が存在する場合、value属性の値は0.0から1.0までの数値、または、 max属性が指定されている場合には0からmax属性の値までの数値を指定します。 value属性に無効な値を指定すると、0に設定されます。 値の単位は任意です。

progress要素のmax属性は、タスクに必要な作業の全体量を表します。 max属性が存在する場合、その値は0より大きい必要があります。 max属性に無効な値を指定すると、1.0に設定されます。 値の単位は任意です。

progress要素を単なる分量表示に使用してはなりません。 例えば、ディスク使用量やクエリ結果の関連性を表すために使用するべきではありません。 このような目的には、代わりにmeter要素を使用する方が適切でしょう。

progress要素の内容には、テキストなどで現在値と最大値を含めることが推奨されています。 これにより、旧いブラウザのユーザーにも進行状況を伝えられるようになります。

■属性

progress要素は、ブラウザ上では進行状況バーとしてレンダリングされますが、 その表示形式はvalue属性の指定によって変化します。 progress要素のvalue属性を指定した場合、 タスク完了に向けてどのくらい進行しているかを表す進行状況バー（確定プログレスバー）となります。 value属性を指定しない場合、単に進行中であることを表す進行状況バー（不確定プログレスバー）となります。

■使用例

以下のサンプルで、progress要素にvalue属性を指定した場合と、 value属性を指定しない場合の違いを示しています。

<p>進行状況: <progress max=100 value=0>0%</progress></p>
<p>進行状況: <progress max=100 value=40>40%</progress></p>
<p>進行状況: <progress max=100 value=80>80%</progress></p>
<p>進行状況: <progress value="１">無効な値</progress></p><!--全角数字なので無効 → value=0に設定される-->
<p>進行状況: <progress max=100>とにかく取り組み中です！</progress></p>

Sponsors