progressタグ
progressは、プログレスバーを表示するタグです。
解説
プログレスバーは処理の進捗状況を分かりやすく表示するものです。
タグを設置しただけではプログレスバーは動かないので、動かしたい場合はJavaScriptで制御する必要があります。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | フロー・コンテンツ フレージング・コンテンツ |
| コンテキスト (親カテゴリ) | フレージング・コンテンツを許可する場所 |
| コンテンツ・モデル (子カテゴリ) | フレージング・コンテンツ |
属性
progressタグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| value | 現在の進捗値を指定する （例）value="0.5" |
| max | 進捗100%の値を指定する （例）max="100" ※デフォルト値は1です。 |
| form | 関連するフォームを指定する （例）form="fm1" |
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
ループするプログレスバーを表示する
<progress></progress>
3割進捗のプログレスバーを表示する
<progress value="30" max="100"></progress>
プログレスバーが未対応のブラウザの場合、「プログレスバーが未対応です」と表示する
<progress>プログレスバーが未対応です</progress>
progressタグが対応しているブラウザで表示した場合は、指定したメッセージは表示されません。
備考
- progressはHTML5で新規に追加された要素です。
