<progress>: 進捗表示要素

HTML の <progress> 要素は、タスクの進捗状況を表示します。プログレスバーとしてよく表示されます。

コンテンツカテゴリ フローコンテンツ記述コンテンツ、ラベル付け可能コンテンツ、知覚可能コンテンツ
許可されている内容 記述コンテンツ。ただし、子要素に <progress> 要素を含めてはならない。
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツ を受け入れるすべての要素
暗黙の ARIA ロール progressbar
許可されている ARIA ロール 許可されている role なし
DOM インターフェイス HTMLProgressElement

属性

この要素にはグローバル属性があります。

max
この属性は、progress 要素で示すタスクで必要とする総作業量を設定します。max 属性を指定する場合は、値を 0 より大きい有効な浮動小数点数値にしなければなりません。既定値は 1 です。
value
この属性は、タスクの進捗状況を設定します。値は 0 から max までの間、または max を省略する場合は 0 から 1 までの間の、有効な浮動小数点数値であることが必要です。value 属性がない場合は、プログレスバーは不定、タスクは処理中であるものの完了までが予想できない状態になります。

注: <meter> 要素とは異なり、最小値は常に 0 で、min 属性は <progress> 要素では許可されていません。

注: :indeterminate 擬似クラスは、不定状態のプログレスバーにマッチします。プログレスバーを値がある状態から不定の状態に変更するには、 element.removeAttribute('value'). で value 属性を削除しなければなりません。

<progress value="70" max="100">70 %</progress>

結果

Windows 7 では、 progress の表示結果は以下のようになります。

progress-firefox.JPG

仕様書

仕様書 状態 備考
HTML Living Standard
<progress> の定義
現行の標準
HTML5
<progress> の定義
勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報