HTML <progress>タグ
例
プログレスバーを表示する：
<label for="file">Downloading progress:</label>
<progress id="file"
value="32" max="100"> 32% </progress>
定義と使用法
タグは、タスクの<progress>完了の進行状況を表します。
ヒント：アクセシビリティのベストプラクティスとして、常に<label>タグを追加してください。
ヒントと注意
ヒント：<progress>タスクの進行状況を表示するには、JavaScriptと組み合わせてタグを使用します。
注：<progress>タグは、ゲージを表すのには適していません（たとえば、ディスク領域の使用量やクエリ結果の関連性）。ゲージを表すには、代わりに<meter>タグを使用します。
ブラウザのサポート
表の数字は、要素を完全にサポートする最初のブラウザバージョンを示しています。
| Element | |||||
|---|---|---|---|---|---|
| <progress> | 8.0 | 10.0 | 16.0 | 6.0 | 11.0 |
属性
| Attribute | Value | Description |
|---|---|---|
| max | number | Specifies how much work the task requires in total. Default value is 1 |
| value | number | Specifies how much of the task has been completed |
グローバル属性
この<progress>タグは、HTMLのグローバル属性もサポートしています。
イベント属性
この<progress>タグは、HTMLのイベント属性もサポートしています。
関連ページ
HTML DOMリファレンス：Progress Object
デフォルトのCSS設定
なし。