Bootstrap4 プログレスバー

 

Bootstrap4 プログレスバー

この記事では、Bootstrap4でプログレスバーコンポーネントを使用する方法について説明します。基本的なプログレスバー、ラベル付きプログレスバー、さまざまな色とサイズのプログレスバー、およびプログレスバーを動的に更新する方法について説明します。

目次

  1. 基本的なプログレスバー
  2. ラベル付きプログレスバー
  3. 高さ
  4. 背景色
  5. ストライププログレスバー
  6. アニメーションプログレスバー
  7. 複数のプログレスバー
  8. 動的更新

1. 基本的なプログレスバー

基本的なプログレスバーを作成するには、<div class="progress"> と <div class="progress-bar"> を使用します。プログレスバーの値は width 属性で設定します。


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

2. ラベル付きプログレスバー

プログレスバーにラベルを追加するには、.progress-bar 内にテキストを追加します。ラベルを非表示にするには、.sr-only クラスを使用します。ただし、スクリーンリーダーでは引き続き読み取ることができます。


<div class="progress">
  <div class="progress-bar" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

3. 高さ

プログレスバーの高さを調整するには、.progress の height 属性を設定します。


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

4. 背景色

.bg-* クラスを使用して、異なる背景色を設定できます。使用できるクラスには、.bg-success、.bg-info、.bg-warning、.bg-danger などがあります。

クラス 色
.bg-success 緑
.bg-info 青
.bg-warning 黄色
.bg-danger 赤 

<div class="progress">
  <div class="progress-bar bg-success" style="width: 25%;"></div>
</div>

<div class="progress">
  <div class="progress-bar bg-info" style="width: 50%;"></div>
</div>

<div class="progress">
  <div class="progress-bar bg-warning" style="width: 75%;"></div>
</div>

<div class="progress">
  <div class="progress-bar bg-danger" style="width: 100%;"></div>
</div>

5. ストライププログレスバー

ストライププログレスバーを作成するには、.progress-bar-striped クラスを使用します。


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

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

アニメーションプログレスバーを作成するには、.progress-bar-animated クラスを使用します。


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

7. 複数のプログレスバー

複数のプログレスバーを作成するには、同じ .progress コンテナ内に複数の .progress-bar 要素を追加します。


<div class="progress">
  <div class="progress-bar bg-success" style="width: 35%;"></div>
  <div class="progress-bar bg-warning" style="width: 20%;"></div>
  <div class="progress-bar bg-danger" style="width: 10%;"></div>
</div>

8. 動的更新

JavaScript を使用して、プログレスバーの値を動的に更新できます。


<div class="progress">
  <div class="progress-bar" id="my-progress-bar" style="width: 0%;"></div>
</div>

<button type="button" class="btn btn-primary" onclick="updateProgressBar();">
  Update Progress Bar
</button>

<script>
function updateProgressBar() {
  // プログレスバーの値を取得します。
  var progressBar = document.getElementById("my-progress-bar");
  var width = parseInt(progressBar.style.width);

  // プログレスバーの値を更新します。
  width += 10;
  progressBar.style.width = width + "%";
}
</script>

参考資料

よくある質問

  1. Q: プログレスバーの値をパーセントではなくピクセルで設定できますか？

    A: はい、width 属性の値をピクセルで指定できます。ただし、レスポンシブデザインの場合は、パーセント値を使用することをお勧めします。

  2. Q: 複数のプログレスバーを同じ高さに揃えるにはどうすればよいですか？

    A: すべての .progress コンテナに同じ height 属性を設定します。

  3. Q: プログレスバーのアニメーションをカスタマイズできますか？

    A: はい、CSS を使用して、プログレスバーのアニメーションをカスタマイズできます。詳細については、Bootstrap4 のドキュメントを参照してください。