<progress>タグの解説
<progress>は、ページの読み込みや計算処理といった作業の進捗状況を表します。現在進行中の状況がどの程度進んでいるのか動的に表現したい場合に適しています。
単純に処理した結果を表す場合は<output>、規定範囲の現在測定値を表す場合は<meter>を採用して下さい。
<progress>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果として横長のグラフィカルなメーターが表示されます。これはブラウザの既定のスタイルによるものです。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<progress>要素に指定できる属性
value- 進行状況を表します。有効な値は
"0"〜max属性で指定された値です。max属性が与えられていない場合は上限を"1.0"とします。この属性がない場合、プログレスバーの進捗は不明となり、タスクは処理中であるものの完了までの予想ができない状態となります。 max- 作業量の最大値を表します。この値は
"0"以上の有効な浮動小数点数値しなければなりません。既定値は"1"です。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<progress>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。max属性の値は単位のない任意の数値で、それに対する進捗の割合をvalue属性で表します。この要素の間に配置される文字は、対応していないブラウザ用の代替テキストです。
<progress value="50" max="100">50%</progress>
いくつかの進捗状況を並べて表示してみましょう。一般的にはJavaScriptなどのスクリプトを使って動的に処理させます。
<progress value="64" max="256"></progress>
<progress value="128" max="256"></progress>
<progress value="192" max="256"></progress>