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 の表示結果は以下のようになります。
Windows では、progress の表示結果は以下のようになります。
追加の例
-moz-orient を参照してください。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard <progress> の定義 |
現行の標準 | |
| HTML5 <progress> の定義 |
勧告 | 最初の定義 |
ブラウザ実装状況
| 機能 | 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% のプログレスバーであるように表示します)。