progress

progress要素は、作業の進捗状況を表す。
progress要素に対応しているブラウザでは、進捗状況がプログレスバーで表示される。
※ブラウザの種類やバージョンにより、プログレスバーのデザインは異なる。

<progress value="0.5"></progress>
<progress value="50" max="100">50%</progress>
  • value：現時点の進捗状況。0以上 ～ max属性値以下（浮動小数点数（0.7、7、7E+2 など））を指定する
  • max：全体の作業量。0より大きい値（浮動小数点数、既定値は 1）を指定する。max属性が省略された場合は、value属性の値は 0 ～ 1 の範囲で指定する（max属性の既定値が 1 のため）。

value属性がないprogress要素は、進捗状況が確定していないことを表す。この場合、そのプログレスバーは未確定プログレスバーとなる。

progress要素の内容は、この要素に対応していないブラウザ向けの代替コンテンツとなる。
この代替コンテンツには、進捗状況が伝わる内容を記述しておくことが推奨されている。
※progress要素に対応しているブラウザでは、この要素の内容は表示されない。

<progress value="70" max="100">70%</progress>
<progress value="7" max="10">7/10</progress>

<p>
  <progress>待機中</progress> （未確定）
</p>

また、プログレスバーの長さや太さは、スタイルシートで変更することができる。

progress {
  width: 300px;
  height: 20px;
}
inserted by FC2 system