progress 要素

HTML5 で導入

概要

HTML の progress (<progress>) 要素は、タスクの進捗状況の表示に使われます。表示の実装方法はブラウザベンダーに委ねられていますが、通常はプログレスバーとして表示されます。JavaScript を使用して、プログレスバーの値を操作することが可能です。

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

属性

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

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

プログレスバーの描画方向の指定に -moz-orient プロパティが使用できます。横(デフォルト)または縦に設定できます。:indeterminate 疑似クラスは、不定状態のプログレスバーにマッチします。

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

表示結果

Mac OS X では、progress の表示結果は以下のようになります。

The progress bar seen in OS X Mavericks

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

progress-firefox.JPG

追加の例

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

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
The definition of '<progress>' in that specification.
Living Standard  
HTML5
The definition of '<progress>' in that specification.
勧告 最初の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 6.0 6.0 (6.0) [1]
14.0 (14.0) [2]
10 11.0 5.2
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) 6.0 (6.0) [1]
14.0 (14.0) [2]
未サポート 11.0 7 [3]

[1] Gecko では、プログレスバーの完了部分のバーをスタイル付けできる ::-moz-progress-bar 疑似要素を提供しています。
Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) より前は、<progress> が誤ってフォーム関連要素に区分されており、form 属性を持っていました。これは修正されました。

[2] Gecko では、プログレスバーの完了部分のバーをスタイル付けできる ::-moz-progress-bar 疑似要素を提供しています。

[3] iOS 版 Safari は不定状態のプログレスバーをサポートしていません (進捗 0% のプログレスバーであるように表示します)。

参照

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

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