HTML Tag Reference

progress 要素

進捗状況を表す

progress 要素は進捗状況を表します。対応するブラウザでは、ゲージなど、直観的な形式で表示されます。

例えば処理の進捗状況や、バッテリーの充電率など、完了とされる値に対する現在の進捗を表すために使用します。人口比率など、特定範囲の数値における現在の数値を表す場合は、meter 要素を使用する方が妥当でしょう。

progress 要素の内容は、対応していない環境への代替コンテンツとなります。

progress 要素の仕様

コンテンツモデル

ただし、progress 要素を子孫に持つことはできません。

この要素を使用できる文脈

フレージング・コンテンツが期待される場所

この要素で使用できる属性

詳細説明

progress 要素に指定可能な属性は下記の通りです。

属性 概要
value 属性 現時点での進捗状況を数値で指定します。指定できる値は浮動小数点数ですが、0以上、max 属性値以下である必要があります。なお、value 属性を持たない progress 要素は、「不定」、つまり「タスクは処理中だが、進捗状況が不明で完了までが予想できない状態」となります。
max 属性 完了となる値を指定します。省略された場合の初期値は 「1.0」 です。

動作サンプル

対応するブラウザでは、プログレスバーが表示されます。

70 %

progress 要素のサンプルソース

<p>
 ダウンロードの進捗: <progress max="100" value="30">30%</progress>
</p>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。