progress-bar w-100

html bootstrap5 Sample

プログレスバー:progressとprogress-barとw-50


  <!-- divで、progressとprogress-barの組み合わせで実装する -->
  <!-- 進捗度は、aria-valuenowの値を変える -->
  <div class="progress mb-3">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar" style="width: 25%" role="progressbar" aria-valuenow="25" aria-valuemin="0"
      aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="50" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0"
      aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>