Bootstrap5 プログレスバー

プログレスバーはユーザータスクの進行状況を表示できます。

基本的なプログレスバーを作成する手順は次のとおりです：

• 次の.progressクラスを持つ <div> を追加します。
• 次に、上記の <div> 内に、class.progress-barを持つ空の <div> を追加します。
• パーセントで表した幅を持つ style 属性を追加します。例： style="width:70%"はプログレスバーが70%の位置にあることを示します。

プログレスバーの高さ

プログレスバーの高さはデフォルトで16pxです。CSSのheight属性を使用して変更できます：

プログレスバーのラベル

プログレスバー内にテキストを追加できます。例：進捗のパーセンテージ：

異なる色のプログレスバー

デフォルトではプログレスバーは青色です。Bootstrap5には以下の色のプログレスバーもあります：

ストライプのプログレスバー

次の.progress-bar-stripedクラスを使用してストライプのプログレスバーを設定できます：

アニメーションプログレスバー

次の.progress-bar-animatedクラスを使用してプログレスバーにアニメーションを追加できます：

複数色のプログレスバー

プログレスバーは複数の色を設定できます：