progress 要素

by 3 contributors:

HTML5 で導入

概要

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

属性

他の 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 の表示結果は以下のようになります。

progress-1.png

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

progress-firefox.JPG

追加の例

orient を参照してください。

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard Living Standard  
HTML5 勧告候補

ブラウザ実装状況

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

Gecko に関する注記

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

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

参照

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

Contributors to this page: yyss, ethertank, hATrayflood
最終更新者: yyss,