progress 要素

概要

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

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

属性

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

max

この属性は、progress 要素で示すタスクで必要とする総作業量を設定します。max 属性を指定する場合は、値を 0 より大きい有効な浮動小数点数値にしなければなりません。

value

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

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

例

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

表示結果

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

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

追加の例

orient を参照してください。

仕様

ブラウザ実装状況

Gecko に関する注記

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

[2] Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) より前は、<progress> が誤ってフォーム関連要素に区分されており、form 属性を持っていました。これは修正されました。

参照

• orient
• :indeterminate
• HTML5 Progress Element