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%」)は、ブラウザが非対応の場合に表示されます。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; }
各ブラウザでのレンダリング結果:
Firefoxの角丸は若干ぼやっとしているような。
角丸にborderを追加するとずれてしまうので、枠線をつけたい場合はbox-shadowのspreadを使うのが良さそうです。