4.10.16 progress 要素

カテゴリー

フロー・コンテンツ

フレージング・コンテンツ

ラベル付け可能なフォーム関連要素

この要素を使うことができるコンテキスト：

フレージング・コンテンツが期待される場所

コンテンツモデル：

フレージング・コンテンツ。ただし、子孫に progress 要素を入れてはいけない。

コンテンツ属性：

グローバル属性

value

max

form

DOMインタフェース：

interface HTMLProgressElement : HTMLElement {
           attribute float value;
           attribute float max;
  readonly attribute float position;
  readonly attribute HTMLFormElement form;
  readonly attribute NodeList labels;
};

progress 要素は、タスクが完了するまでの進捗を表します。その進捗が確定できない場合もあります。それは、進捗はあるものの、そのタスクが完了するまでに、どれだけの作業が残っているのかが、はっきりしないことを表します（例えば、そのタスクはリモート・ホストの応答を待っているといった理由から）。また、その進捗は、0 から最大値の範囲の数字をとることもあります。その数字とは、その時点までで完了した作業の割合のことです。

この要素で表される現在のタスクの完了度を決定する 2 つの属性があります。 value 属性には、タスクがどれだけ完了したかを指定します。max 属性には、そのタスクが完了するために合計でどれだけの作業が必要なのかを指定します。単位は任意で、指定はありません。

value 属性に現在の進捗（0.0 から 1.0 までの数値、もしくは、max 属性が指定されているなら、0 から max 属性の値までの数値）を指定することで、確定プログレス・バーを作ることができます。value 属性を削除すれば、未確定プログラスバーを作ることができます。

ウェブ制作者は現在値と最大値をその要素の中にインラインで入れ、古いユーザーエージェントのユーザーでも、その進捗を把握できるようにすることが推奨されます。

<section>
 <h2>Task Progress</h2>
 <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 </script>
</section>

value と max 属性が存在すれば、それらの値は妥当な浮動小数点数でなければいけません。value 属性が存在すれば、その値は 0 以上でなければいけません。max 属性が存在すれば、value 属性の値は max 属性値以下でなければいけません。存在しなければ、value 属性の値は 1.0 以下でなければいけません。max 属性が存在すれば、その値は 0 より大きい値でなければいけません。

progress 要素を、タスクの進捗ではなく、まさにゲージとなるようなものに使うのは正しくありません。例えば、ディスク使用量を progress 要素を使って表示するのは適切ではないでしょう。この場合は、meter 要素のほうが適切です。

progress . position

確定プログレスバー（現在値と最大値が分かっている）に対して、現在値を最大値で割った結果を返します。

未確定プログレスバーに対しては、-1 を返します。

※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-progress-element