Bootstrap 5でアニメーション付き進捗バーを実装する方法

方法1: CSSアニメーションを使用する方法 Bootstrap 5では、CSSアニメーションを利用して進捗バーをアニメーション化することができます。以下にサンプルコードを示します。

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

方法2: JavaScriptを使用する方法 JavaScriptを使用することで、進捗バーのアニメーションをカスタマイズすることができます。以下にサンプルコードを示します。

<div class="progress">
  <div class="progress-bar" id="myProgressBar"></div>
</div>
<script>
  var progressBar = document.getElementById('myProgressBar');
  var width = 0;
  var interval = setInterval(increaseWidth, 100);
  function increaseWidth() {
    if (width >= 100) {
      clearInterval(interval);
    } else {
      width += 10;
      progressBar.style.width = width + '%';
    }
  }
</script>

方法3: Bootstrap 5のアニメーションクラスを組み合わせる方法 Bootstrap 5には、進捗バーに適用できるさまざまなアニメーションクラスが用意されています。これらのクラスを組み合わせることで、より洗練されたアニメーションを実現することができます。以下にサンプルコードを示します。

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

以上が、Bootstrap 5でアニメーション付きの進捗バーを実装するためのいくつかの方法とコード例です。これらの方法を使用することで、魅力的でダイナミックな進捗バーを作成することができます。