HTML の <progress> 要素は、タスクの進捗状況を表示します。プログレスバーとしてよく表示されます。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
| コンテンツカテゴリ | フローコンテンツ、記述コンテンツ、ラベル付け可能コンテンツ、知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ。ただし、子要素に <progress> 要素を含めてはならない。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツ を受け入れるすべての要素 |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | HTMLProgressElement |
属性
この要素にはグローバル属性があります。
max- この属性は、
progress要素で示すタスクで必要とする総作業量を設定します。max属性を指定する場合は、値を 0 より大きい有効な浮動小数点数値にしなければなりません。既定値は 1 です。 value- この属性は、タスクの進捗状況を設定します。値は 0 から
maxまでの間、またはmaxを省略する場合は 0 から 1 までの間の、有効な浮動小数点数値であることが必要です。value属性がない場合は、プログレスバーは不定、タスクは処理中であるものの完了までが予想できない状態になります。
メモ: 最小値は常に 0 であり、min 属性は progress 要素で許可されていません。-moz-orient CSS プロパティを使用して、プログレスバーを水平方向に表示する (既定値) か垂直方向に表示するかを指定できます。
メモ: :indeterminate 疑似クラスは、不定状態のプログレスバーにマッチします。プログレスバーを値がある状態から不定の状態に変更するには、element.removeAttribute("value") で value 属性を削除しなければなりません。
例
<progress value="70" max="100">70 %</progress>
結果
Windows 7 では、 progress の表示結果は以下のようになります。
追加の例
-moz-orient を参照してください。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| HTML Living Standard <progress> の定義 |
現行の標準 | |
| HTML5 <progress> の定義 |
勧告 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
progress | Chrome 完全対応 6 | Edge 完全対応 12 | Firefox
完全対応
6
| IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android
完全対応
6
| Opera Android 完全対応 11 | Safari iOS
完全対応
7
| Samsung Internet Android 完全対応 あり |
max | Chrome 完全対応 6 | Edge 完全対応 12 | Firefox 完全対応 6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 6 | Opera Android 完全対応 11 | Safari iOS 完全対応 7 | Samsung Internet Android 完全対応 あり |
value | Chrome 完全対応 6 | Edge 完全対応 12 | Firefox 完全対応 6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 6 | Opera Android 完全対応 11 | Safari iOS 完全対応 7 | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。