仕様

PROGRESS要素は、
タスクの完了の進行状況を
表します。

progress進捗表示 (Progress indicator)
カテゴリ
  • フレージングコンテンツ
  • フローコンテンツ
  • パルパブルコンテンツ
  • ラベル付け可能な要素
種類通常要素
この要素を
使用できる
状態		フレージングコンテンツを受け入れる要素。
許可されて
いる内容		フレージングコンテンツ。しかし、progress要素の子孫があってはなりません。
属性グローバル属性,
value
要素の現在の値
max
範囲の上限
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		なし[既定値 : progressbar]
DOM
インター
フェイス
HTMLProgressElement
  1. [Exposed=Window]
  2. interface HTMLProgressElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute double value;
  6. [CEReactions] attribute double max;
  7. readonly attribute double position;
  8. readonly attribute NodeList labels;
  9. };
レンダリング
特になし
参加
コンテキスト		インラインフォーマットコンテキスト
確立
コンテキスト		インラインフォーマットコンテキスト
progress要素は、タスクの完了の進行状況を表します。

  1. <progress id="ipr01" value="50" max="100">
  2. <span>50</span>%
  3. </progress>
  4. <script>
  5. var leProgress = document.getElementById('ipr01');
  6. function lfvUpdateProgress(anValue) {
  7. leProgress.value = anValue;
  8. leProgress.getElementsByTagName('span')[0].textContent = anValue;
  9. }
  10. </script>
50%
参照元
  1. HTML Living Standard. 4.10.13 The progress element
  2. HTML 5.2 W3C 勧告. 4.10.13 The progress element
  3. MDN Web Docs. HTML <progress>: 進捗表示要素

使用可能な箇所

フレージングコンテンツを
受け入れる要素に
配置できます。

progress要素は、フレージングコンテンツを受け入れる要素に配置できます。
フレージングコンテンツは、フローコンテンツのタイプの１つです。フローコンテンツを受け入れる要素でも配置できます。

ラベル付け可能な要素なので、他にラベル付け可能な要素がある label要素には配置できません。

  1. <pre>
  2. <progress>progress</progress>
  3. </pre>

フレージングコンテンツを配置できる pre要素のコンテンツの一部として、progress要素を配置できます。

progress

配置できるコンテンツ

フレージングコンテンツを
配置できます。

progress要素は、progress要素の子孫がないフレージングコンテンツを配置できます。配置された内容は、progress要素に対応していない場合に表示されます。

  1. <progress>
  2. <span>progress</span>
  3. </progress>

progress要素のコンテンツの一部として、フレージングコンテンツである span要素を配置できます。

progress

属性

value属性

  1. <progress id="ipgJs941" value="" max="100">
  2. <span>50</span>%
  3. </progress>

value属性は、タスクの進捗状況を指定します。max属性が指定されていない場合は 1 を、指定されている場合はその値を最大値として 0 以上の現在の値を指定します。 value属性に不適切な値が指定された場合は、0 が指定されたものとして処理されます。value属性が指定されていない場合は、進行状況バーは不確定な進行状況バーです。
スクリプトで動的にこの属性の値を更新して、進捗の状況を表します。合わせて progress要素のテキストコンテンツも更新する事で、progress要素に未対応のブラウザ等でもタスクの進捗状況をテキスト形式ですが表示できます。

50%

max属性

  1. <progress id="ipgJs942" value="50" max="">
  2. <span>50</span>%
  3. </progress>

max属性は、タスクが必要とする合計作業量を指定します。max属性が指定されていない場合は 1 を、合計作業量とします。

50%

id属性

  1. <progress id="ipgJs943" value="50" max="100">
  2. <span>50</span>%
  3. </progress>
  4. <form oninput="lfvUpdateProgress(iipJs943.value);">
  5. <label>値を入力
  6. <input type="number" value="50" max="100" min="0" step="1" id="iipJs943">
  7. </label>
  8. </form>
  9. <script>
  10. var leProgress = document.getElementById('ipgJs943');
  11. function lfvUpdateProgress(anValue) {
  12. leProgress.value = anValue;
  13. leProgress.getElementsByTagName('span')[0].textContent = anValue;
  14. }
  15. </script>

id属性は、要素の一意の識別子（ID）を指定するグローバル属性です。
HTML要素で指定する場合、id属性値は要素のツリー内のすべてのIDの中で一意である必要があり、少なくとも1つの文字が含まれている必要があります。 値には、ASCII空白を含めないでください。 IDの形式には他の制限はありません。特に、IDは数字のみで構成することも、数字で開始することも、アンダースコアで開始することも、句読点のみで構成することもできます。
要素の一意の識別子は、さまざまな目的に使用できます。特に、フラグメントを使用してドキュメントの特定の部分にリンクする方法として、スクリプトで要素をターゲットにする方法として、 およびCSSから特定の要素のスタイルを設定する方法として使用できます。
スクリプトが progress要素の id属性の値を用いて要素を特定します。

50%

気を付ける点

progress要素は、タスクの進行状況とは対照的に、単なるゲージであるものに使用するには間違った要素です。 その様な物には meter要素が使用できます。