「プログレスバー - Bootstrap4移行ガイド」を読んだ。
- 最大値に対して進行状況をあらわすコンポーネント
- HTML5 の
progress要素は使わずに表示できるコンポーネント .progressで包括要素（最大値を示す要素）を表示.progress-barで進行状況をあらわす要素を表示.progress-barを指定する要素にはrole属性とaria属性も必要role="progressbar"属性 ... プログレスバーの役割を知らせるaria-valuenow="*"... 現在値aria-valuemin="*"... 最小値aria-valuemax="*"... 最大値
.progress-barの幅を変更するには、インラインスタイル、またはユーティリティクラス、またはカスタム CSS を書く.progress-bar内にテキストを表示するには、単純にこの要素の中にテキストを書く- プログレスバーの高さを変えるには、
.progressのheightプロパティを変更する。.progress-barの高さはこれに応じて自動的に変わる - カラーユーティリティクラスを使えばプログレスバーの色は変更できる
.progress-bar-stripedでプログレスバーの背景をストライプ柄にすることができる- ストライプ柄のプログレスバーは
.progress-bar-striped.progress-bar-animatedでアニメーションさせることもできる - プログレスバーの積み重ねは、単純に
.progress内に背景色の異なる.progress-barを複数書く
