progress 要素進捗状況を表す

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

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

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

さらに詳細な説明を見る

サンプルソースを見る

progress 要素の仕様

カテゴリ
コンテンツモデル

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

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

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

この要素で使用できる属性
DOM インタフェース
interface HTMLProgressElement : HTMLElement {
           attribute double value;
           attribute double max;
  readonly attribute double position;
  readonly attribute NodeList labels;
};

詳細説明

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

属性 概要
value 属性 現時点での進捗状況を数値で指定します。指定できる値は浮動小数点数ですが、0以上、max 属性値以下である必要があります。
max 属性 完了となる値を指定します。省略された場合の初期値は 「1.0」 です。

progress 要素のサンプルソース

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

W3C HTML5 仕様書

4.10.16 The progress element