<progress>

HTMLの<progress>タグを使うと、進捗状況を表わすプログレスバーを表示できる。

使い方

<progress>
  Processing
</progress>

開始タグと終了タグの間の文字列は表示されない。

ラベルを付けることもできる。

<label for="install">
  進捗状況
</label>
<progress id="install">
</progress>

<progress> とほぼ同じ機能を持つタグとして、<meter> がある。

属性

<progress> タグには次の属性を指定できる。

value

現在の値を指定する。value属性の指定を省略した場合は不定となる。

<progress value="0.8">
</progress>
max

プログレスバーが取り得る範囲の上限値を指定する。max属性の指定を省略した場合、上限値は1となる。

<progress value="3" max="5">
</progress>
class

CSSのクラスを指定する。

id

一意な識別子を指定する。

style

CSSのプロパティを指定する。

<progress value="0.8" style="height:2rem;">
</progress>
title

プログレスバーのタイトルを指定する。

<progress value="0.5" title="0.5">
</progress>

色変更

プログレスバーの色を変更する標準的な方法は存在しない。ただし、ウェブブラウザごとに固有の方法で色を変更することはできる。

ChromeやSafariなどのWebKit系ウェブブラウザでプログレスバーの色を変更するには、次のようにする。

<style>
  progress {
    -webkit-appearance: none;
  }
  ::-webkit-progress-bar {
    background-color: gray;
  }
  ::-webkit-progress-value {
    background-color: aqua;
  }
</style>
<progress value="3" max="5">
</progress>

Firefoxでプログレスバーの色を変更するには、次のようにする。

<style>
  progress {
    -moz-appearance: none;
    background-color: gray;
  }
  ::-moz-progress-bar {
    background-color: aqua;
  }
</style>
<progress value="3" max="5">
</progress>

コンテンツモデル

progress要素は次のコンテンツモデルに属する。

HTMLタグ