<progress>
<progress> は HTML の要素で、タスクの進捗状況を表示します。ふつうはプログレスバーとして表示されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 6 | 12 | 6 | 6 | 18 | 7 | |
| HTML 属性 | ||||||
| max 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 (value) がこれより大きい場合、その要素は制約検証に失敗します。この値は、 min 属性の値以上でなければなりません。 max 属性が存在していても、指定されていないか無効であった場合、 max 値は適用されません。 max 属性が有効で、値が空でなく、 max 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。 | 6 | 12 | 6 | 6 | 18 | 7 |
value | 6 | 12 | 6 | 6 | 18 | 7 |
| DOM API | ||||||
| HTMLProgressElement インターフェイスは、（継承によって利用できる HTMLElement オブジェクトのインターフェイス以外に）progress 要素のレイアウトや表現を操作するためのプロパティやメソッドを提供します。 | 6 | 12 | 6 | 6 | 18 | 6 |
| HTMLProgressElement.labels は読み取り専用プロパティで、この progress 要素に関連付けられている label 要素の NodeList を返します。 | 6 | 18 | 56 | 6 | 18 | 6 |
| HTMLProgressElement インターフェースの max プロパティは、プログレス要素の範囲の上限を表します。 | 6 | 12 | 6 | 6 | 18 | 6 |
| HTMLProgressElement インターフェースの position read-only プロパティは、進捗要素の現在の進捗を返す。 | 6 | 12 | 6 | 6 | 18 | 6 |
| HTMLProgressElement インターフェースの value プロパティは、progress 要素の現在の進行状況を表す。 | 6 | 12 | 6 | 6 | 18 | 6 |
- Firefox 14 より前のバージョンでは、`<progress>` 要素が誤って form 要素に分類され、`form` 属性を持っていました。これは修正されました。
- Firefox は `::-moz-progress-bar` 擬似要素を提供しており、プログレスバー内部の、これまでに完了した作業量を表す部分のスタイルを指定できます。
- iOSのSafariは不確定プログレスバーをサポートしていません（0%完了プログレスバーのように表示されます）。
基本構文
<label>Download progress:
<progress value="70" max="100">70%</progress>
</label>
<!-- 不確定状態（value なし） -->
<progress>Loading...</progress>ライブデモ
basic progressba-
Control. with Progress element in task. progress ba-display.value and max.
実務での使いどころ
-
<progress> の活用
<progress> は HTML の要素で、タスクの進捗状況を表示します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。