HTML5 で導入

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

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

属性

他の HTML 要素と同様、グローバル属性 が使用できます。

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

注記: 最小値は常に 0 であり、min 属性は progress 要素で許可されていません。-moz-orient CSS プロパティを使用して、プログレスバーを水平方向に表示する (既定値) か垂直方向に表示するかを指定できます。

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

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

表示結果

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

progress-firefox.JPG

追加の例

-moz-orient を参照してください。

仕様

仕様書 策定状況 コメント
HTML Living Standard
<progress> の定義
現行の標準  
HTML5
<progress> の定義
勧告 最初の定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート6 (有り)61 210115.2
max6 (有り)610115.2
value6 (有り)610115.2
機能AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基本サポート (有り) (有り) (有り)61 2 無し1173
max (有り) (有り) (有り)6 無し117
value (有り) (有り) (有り)6 無し117

1. Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.

2. Firefox provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.

3. Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).

参照

ドキュメントのタグと貢献者

 このページの貢献者: yyss, ethertank, hATrayflood
 最終更新者: yyss,