progress-bar progress-bar-striped progress-bar-animated bg-danger

html bootstrap5 Sample

プログレスバーのアニメーションさせる:progress-bar-animated


  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25"
      aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
      aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="75"
      aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"
      aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
  </div>