Bootstrap 5 プログレスバー

基本プロセスバー

プロセスバーは、ユーザーが特定のプロセスでどの程度進んでいるかを表示するために使用されます。

デフォルトのプロセスバーを作成するには、以下のように設定してください： .progress クラスをコンテナ要素に追加し、 .progress-bar クラスを子要素に追加して、CSS width 属性を使用してプロセスバーの幅を設定します：

例

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

自分で試してみる

プロセスバーの高さ

プロセスバーの高さはデフォルトで 1rem（通常は、 16px）。CSSを使用して、以下のように設定してください： height 属性を使用して変更できます。

ヒント：注意：プロセスコンテナとプロセスバーの高さを同じに設定する必要があります：

例

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

自分で試してみる

プロセスバーのタグ

プロセスバー内にテキストを追加して、表示されるパーセンテージを表示します：

例

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

自分で試してみる

カラフルなプロセスバー

デフォルトでは、プロセスバーは青色（メイン）です。色を変更するには、どんなコンテキスト背景クラスを使っても構いません：

例

<!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>
<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- グレー -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- 淡グレー -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- 濃グレー -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

自分で試してみる

ストライプ付き進捗バー

使用してください .progress-bar-striped 進捗バーにストライプを追加するためのクラス：

例

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

自分で試してみる

進捗バーのアニメーション

追加してください .progress-bar-animated 進捗バーのアニメーションを作成するためのクラス：

例

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

自分で試してみる

複数の進捗バー

進捗バーは重ね合わせもできます：

例

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    フリースペース
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    警告
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    危険
  </div>
</div>

自分で試してみる