スタック バー、アニメーション化された背景、およびテキスト ラベルをサポートする Bootstrap カスタム プログレス バーの使用に関するドキュメントと例。
使い方
Progress コンポーネントは、2 つの HTML 要素、幅を設定する CSS、およびいくつかの属性で構築されます。HTML5<progress>
要素を使用しないため、プログレス バーを積み重ねたり、アニメーション化したり、テキスト ラベルを上に配置したりできます。
- をラッパーとして使用し
.progress
て、進行状況バーの最大値を示します。
- インナーを使用して、
.progress-bar
これまでの進行状況を示します。
- の
.progress-bar
幅を設定するには、インライン スタイル、ユーティリティ クラス、またはカスタム CSS が必要です。
- には、アクセス可能にするためにいくつかのおよび属性
.progress-bar
も必要です。role
aria
これらをすべてまとめると、次の例が得られます。
Bootstrap には、width を設定するためのユーティリティがいくつか用意されています。必要に応じて、進行状況をすばやく構成するのに役立ちます。
ラベル
内にテキストを配置して、プログレス バーにラベルを追加します.progress-bar
。
身長
height
に値を設定するだけな.progress
ので、その値を変更すると、それに応じて内側の.progress-bar
サイズが自動的に変更されます。
背景
バックグラウンド ユーティリティ クラスを使用して、個々の進行状況バーの外観を変更します。
複数のバー
必要に応じて、プログレス コンポーネントに複数のプログレス バーを含めます。
ストライプ
プログレス バーの背景色に CSS グラデーションを介してストライプを適用するには、.progress-bar-striped
anyに追加します。.progress-bar
アニメーションストライプ
縞模様のグラデーションもアニメーション化できます。を追加.progress-bar-animated
し.progress-bar
て、CSS3 アニメーションを介してストライプを右から左にアニメーション化します。