<progress>
| 対応ブラウザ | Chrome 8～ / Firefox 6.0～ / Internet Explorer 10～ / Opera 11.0～ / Safari 6.0～ / Android 4.4～ / iOS 7.0～ | ||
|---|---|---|---|
| タグの分類 |
フロー・コンテンツ フレージング・コンテンツ パルパブル・コンテンツ ラベル付け可能要素 |
含められるもの | フレージング・コンテンツで、<progress>要素の子孫を持たないもの |
| 使える場所 | フレージング・コンテンツを使える場所 | ||
| 用例 | <progress value="0.3"></progress> | ||
<progress>とは
「progress」とは、作業の進捗状況を表示するために使用するタグです。最大値を max とした現在の値 value をプログレスバーなどで表します。
<progress>要素に対応しているブラウザでは、スクリプトと組み合わせることで、進捗状況をリアルタイムで表示することが可能です。また、<progress> に対応していないブラウザを使用しているユーザーにも進捗状況を知らせるために、<progress>～</progress> の間にメッセージや代替内容などを記述することが推奨されています。
<progress>要素は作業がどのくらい進んでいるかは分からないものの、進んではいるということ（サーバーからの返事待ちなど）を表すのにも使えます。その場合はvalue属性を指定しないで使います。
value属性の値を0からmax属性の値まで間に指定することで、進捗状況を表します。指定しない場合は具体的な進度が不明なものの、何かは進んでいるということがユーザに分かるようなプログレスバーを表示します。
max属性には最大値を指定します。指定しない場合は1.0が最大値となります。
なおディスクの使用量など、進捗以外を表すゲージを使いたい場合は<progress>タグは使用せず、<meter>タグを使用します。
