<progress>: 進捗表示要素

ジャンプ先:
  1. 属性
  2. 例
  3. 仕様書
  4. ブラウザーの対応
  5. 関連情報

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> の定義		 勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
progressChrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 6
補足
完全対応 6
補足
補足 Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
補足 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.
IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 6
補足
完全対応 6
補足
補足 Prior to Firefox 14, the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.
補足 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.
Opera Android 完全対応 11Safari iOS 完全対応 7
補足
完全対応 7
補足
補足 Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).
Samsung Internet Android 完全対応 あり
maxChrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 11Safari iOS 完全対応 7Samsung Internet Android 完全対応 あり
valueChrome 完全対応 6Edge 完全対応 ありFirefox 完全対応 6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 11Safari iOS 完全対応 7Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

タグ: 
このページの貢献者: mdnwebdocs-bot, mfuji09, yyss, ethertank, hATrayflood
最終更新者: mdnwebdocs-bot,