HTML の <progress>
要素は、タスクの進捗状況を表示します。プログレスバーとしてよく表示されます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
コンテンツカテゴリ | フローコンテンツ、記述コンテンツ、ラベル付け可能コンテンツ、知覚可能コンテンツ |
---|---|
許可されている内容 | 記述コンテンツ。ただし、子要素に <progress> 要素を含めてはならない。 |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | 記述コンテンツ を受け入れるすべての要素 |
暗黙の ARIA ロール | progressbar |
許可されている ARIA ロール | 許可されている role なし |
DOM インターフェイス | HTMLProgressElement |
属性
この要素にはグローバル属性があります。
max
- この属性は、
progress
要素で示すタスクで必要とする総作業量を設定します。max
属性を指定する場合は、値を0
より大きい有効な浮動小数点数値にしなければなりません。既定値は1
です。 value
- この属性は、タスクの進捗状況を設定します。値は
0
からmax
までの間、またはmax
を省略する場合は0
から1
までの間の、有効な浮動小数点数値であることが必要です。value
属性がない場合は、プログレスバーは不定、タスクは処理中であるものの完了までが予想できない状態になります。
注: <meter>
要素とは異なり、最小値は常に 0 で、min
属性は <progress>
要素では許可されていません。
注: :indeterminate
擬似クラスは、不定状態のプログレスバーにマッチします。プログレスバーを値がある状態から不定の状態に変更するには、 element.removeAttribute('value')
. で value 属性を削除しなければなりません。
例
<progress value="70" max="100">70 %</progress>
結果
Windows 7 では、 progress の表示結果は以下のようになります。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <progress> の定義 |
現行の標準 | |
HTML5 <progress> の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。