HTMLの<progress>タグを使うと、進捗状況を表わすプログレスバーを表示できる。
<progress>
Processing
</progress>
開始タグと終了タグの間の文字列は表示されない。
ラベルを付けることもできる。
<label for="install">
進捗状況
</label>
<progress id="install">
</progress>
<progress> とほぼ同じ機能を持つタグとして、<meter> がある。
<progress> タグには次の属性を指定できる。
現在の値を指定する。value属性の指定を省略した場合は不定となる。
<progress value="0.8">
</progress>
プログレスバーが取り得る範囲の上限値を指定する。max属性の指定を省略した場合、上限値は1となる。
<progress value="3" max="5">
</progress>
CSSのクラスを指定する。
一意な識別子を指定する。
CSSのプロパティを指定する。
<progress value="0.8" style="height:2rem;">
</progress>
プログレスバーのタイトルを指定する。
<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要素は次のコンテンツモデルに属する。