yuw27b’s blog

技術メモと雑記

HTMLのprogress要素を使ってプログレスバーを表示する

HTMLにはprogress要素があり、HTMLのみでブラウザ上にプログレスバーを表示することができます。

2020年7月時点では、どのブラウザでも問題なく利用できそうです。
ブラウザ対応状況:https://caniuse.com/#feat=progress
WHATWG仕様(Living Standard):
https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element


デフォルトでどんなふうにレンダリングされるかは、ブラウザにより異なります。
以下のようなシンプルなHTMLでは、

<progress value="30" max="100">30%</progress>

このように表示されます:
30%

※タグの間のテキスト(「30%」)は、ブラウザが非対応の場合に表示されます。videoタグなどと同じですね。

CSSでの見た目の変更もある程度可能です。幅・高さ・色が変えられるので、十分実用できそうです。(ベンダープレフィックスは必要ですが。)

progress {
  width: 200px;
  height: 30px;
  background-color: orange;
}

progress::-webkit-progress-bar {
  background-color: orange;
}

progress::-webkit-progress-value {
  background-color: violet;
}

progress::-moz-progress-bar {
  background-color: violet;
}

progress::-ms-fill {
  background-color: violet;
}


以下を追加すれば角丸になります。

progress {
  width: 200px;
  height: 30px;
  border-radius: 15px;
}

progress::-webkit-progress-bar {
   border-radius: 15px;
}

progress::-webkit-progress-value {
   border-radius: 15px;
}

progress::-moz-progress-bar {
   border-radius: 15px;
}

progress::-ms-fill {
   border-radius: 15px;
}


各ブラウザでのレンダリング結果:
f:id:yuw27b:20200803220432j:plain
Firefoxの角丸は若干ぼやっとしているような。

角丸にborderを追加するとずれてしまうので、枠線をつけたい場合はbox-shadowのspreadを使うのが良さそうです。