We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

HTML5 で導入

HTML の <progress> 要素は、タスクの進捗状況を表示します。プログレスバーとしてよく表示されます。

コンテンツカテゴリー フローコンテンツ記述コンテンツ、ラベル付け可能コンテンツ、知覚可能コンテンツ
許可されている内容 記述コンテンツ。ただし、子要素に <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 の表示結果は以下のようになります。

progress-firefox.JPG

追加の例

-moz-orient を参照してください。

仕様策定状況

仕様書 策定状況 コメント
HTML Living Standard
<progress> の定義
現行の標準  
HTML5
<progress> の定義
勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応6 あり61 210116
max6 あり610116
value6 あり610116
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり61 21173 あり
max あり あり あり6117 あり
value あり あり あり6117 あり

1. Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.

2. Firefox provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.

3. Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank, hATrayflood
最終更新者: mfuji09,