HTML5

タグ（要素）

PROGRESS

→● mdn

進捗バーを表す。

この要素を使用できる文脈

フレージング内容が期待される場所。

内容モデル

フレージング内容、ただし PROGRESS 要素子孫が存在してはならない。

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性

• value ─ 要素の現在値
• max ─ 範囲の上限

解説

タスクの完了の進捗を表す。

進捗は、進捗が進行しているが（たとえば、タスクが応答するリモートホストを待っているためなど）タスクが完了する前にどの程度作業が残っているのかが明らかでないことを指す不確定であるか、進捗がこれまでに完了している作業率を与える 0 から最大の範囲における数値であるかのいずれかである。

要素によって表される現行のタスク完了を決定する 2 つの属性がある。value 属性はどの程度タスクが完了しているかを指定し、max 属性は、タスクが合計でどの程度のタスクが必要かを指定する。単位は任意であり、指定されない。

例

<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属性

要素の現在値。

<PROGRESS value=0.5></PROGRESS>

max属性

範囲の上限。

単位は任意であり、指定されない。

<PROGRESS max=100 value=30></PROGRESS>

テスト