<progress>

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

使い方

<progress>
  Processing
</progress>

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

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

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

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

属性

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

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
value

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

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

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

<progress value="3" max="5">
</progress>
id
HTML文書内で一意な識別子を指定する。要素に識別子を付けることにより、CSSのセレクタやJavaScriptでこの要素を特定できる。
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要素は次のコンテンツモデルに属する。

JavaScript

JavaScriptからはHTMLProgressElementインタフェースを通じてprogress要素へアクセスできる。

HTMLProgressElementインタフェースのプロパティ
プロパティ 型 説明
classList DOMTokenList クラスのリスト（読取り専用）
clientHeight Number 要素の内部の高さ（読取り専用）/td>
clientWidth Number 要素の内部の幅（読取り専用）
dir DOMString progress要素のdir属性
max double progress要素のmax属性
style CSSStyleDeclaration progress要素のstyle属性
title DOMString progress要素のtitle属性
value double progress要素のvalue属性

JavaScriptからプログレスバーの進捗を変える例を次に示す。

<progress value="0" id="pb">
</progress>
<script>
  // do something
  document.getElementById("pb").value = "0.5";
  // do something
  document.getElementById("pb").value = "1";
</script>

HTMLタグ

HTMLタグには次のものがある。

参考文献

WHATWG (2021) "The progress element" HTML Living Standard