<progress> 作業の進捗状況を示すプログレスバーを表示する
| 取り扱い | 現行の標準 |
| カテゴリ |
フロー・コンテンツ フレージング・コンテンツ パルパブル・コンテンツ |
| 親にできる要素 | フレージング・コンテンツを受け入れる要素 |
| 子にできる要素 | フレージング・コンテンツ。ただし、<progress>を除く |
| 対応ブラウザ | caniuseで確認 |
<progress>タグの説明
<progress>は、ページの読み込みや計算処理といった作業の進捗状況を示すプログレスバーを表示するために使用します。現在進行中の動的な表現が必要な場合に活用できる要素です。この要素の登場によって、今までjQueryやFlashを用いて作成していたプログレスバーが、HTMLだけで表現できるようになったと言えます。
単純に処理結果を表示するだけの場合は<output>、規定範囲の現在測定値を表示する場合は<meter>を用いて下さい。
<progress>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果として横長のグラフィカルなメーターが表示されます。これはブラウザの既定のスタイルによるものです。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<progress>に指定できる主な属性
- value
- 進行状況を表します。有効な値は
0.0〜1.0です。max属性が与えられている場合は上限がその値になります。この属性がない場合、プログレスバーの進捗は不明となり、タスクは処理中であるものの完了までの予想ができない状態となります。 - max
- 作業量の最大値を指定できます。この値は、
0.0以上にしなければなりません。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<progress>の使い方とサンプル
このタグを使ったマークアップのサンプルです。一般的にはJavaScriptなどのスクリプトを使って動的に処理させます。
HTML
<progress value="20" max="100">20%</progress>
<progress value="40" max="100">40%</progress>
<progress value="60" max="100">60%</progress>
表示確認