HTML Tag Reference
progress 要素
進捗状況を表す
progress 要素は進捗状況を表します。対応するブラウザでは、ゲージなど、直観的な形式で表示されます。
例えば処理の進捗状況や、バッテリーの充電率など、完了とされる値に対する現在の進捗を表すために使用します。人口比率など、特定範囲の数値における現在の数値を表す場合は、meter 要素を使用する方が妥当でしょう。
progress 要素の内容は、対応していない環境への代替コンテンツとなります。
progress 要素の仕様
- コンテンツモデル
-
ただし、progress 要素を子孫に持つことはできません。
- この要素を使用できる文脈
フレージング・コンテンツが期待される場所
詳細説明
progress 要素に指定可能な属性は下記の通りです。
| 属性 | 概要 |
|---|---|
| value 属性 | 現時点での進捗状況を数値で指定します。指定できる値は浮動小数点数ですが、0以上、max 属性値以下である必要があります。なお、value 属性を持たない progress 要素は、「不定」、つまり「タスクは処理中だが、進捗状況が不明で完了までが予想できない状態」となります。 |
| max 属性 | 完了となる値を指定します。省略された場合の初期値は 「1.0」 です。 |
動作サンプル
対応するブラウザでは、プログレスバーが表示されます。
progress 要素のサンプルソース
<p> ダウンロードの進捗： <progress max="100" value="30">30%</progress> </p>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |