Bootstrap 5 การสร้าง Progress Bar

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

  <div class="progress" style="height:20px;">
    <div class="progress-bar" style="width:50%; height:20px;"></div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar" style="width:80%; height:30px;"></div>
  </div>

  <div class="progress" style="height:20px;">
    <div class="progress-bar" style="width:50%; height:20px;">50%</div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar" style="width:80%; height:30px;">กำลังดำเนินการ 80%</div>
  </div>

  <div class="progress" style="height:30px;">
    <div class="progress-bar bg-primary" style="width:20%; height:30px;">กำลังดำเนินการ 20%</div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar bg-success" style="width:25%; height:30px;">กำลังดำเนินการ 25%</div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar bg-info" style="width:30%; height:30px;">กำลังดำเนินการ 30%</div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar bg-warning" style="width:35%; height:30px;">กำลังดำเนินการ 35%</div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar bg-danger" style="width:40%; height:30px;">กำลังดำเนินการ 40%</div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar bg-white" style="width:45%; height:30px;">กำลังดำเนินการ 45%</div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar bg-gray" style="width:50%; height:30px;">กำลังดำเนินการ 50%</div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar bg-light" style="width:55%; height:30px;">กำลังดำเนินการ 55%</div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar bg-dark" style="width:60%; height:30px;">กำลังดำเนินการ 60%</div>
  </div>

  <div class="progress">
    <div class="progress-bar bg-primary progress-bar-striped" style="width:20%;">กำลังดำเนินการ 20%</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" style="width:25%;">กำลังดำเนินการ 25%</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info progress-bar-striped" style="width:30%;">กำลังดำเนินการ 30%</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning progress-bar-striped" style="width:35%;">กำลังดำเนินการ 35%</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger progress-bar-striped" style="width:40%;">กำลังดำเนินการ 40%</div>
  </div>

  <div class="progress">
    <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" style="width:20%;">กำลังดำเนินการ 20%</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:25%;">กำลังดำเนินการ 25%</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width:30%;">กำลังดำเนินการ 30%</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:35%;">กำลังดำเนินการ 35%</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:40%;">กำลังดำเนินการ 40%</div>
  </div>

  <div class="progress">
    <div class="progress-bar bg-success" style="width:20%;">งานที่สำเร็จแล้ว 20%</div>
    <div class="progress-bar bg-warning" style="width:20%;">งานที่กำลังทำ 20%</div>
    <div class="progress-bar bg-danger" style="width:60%;">งานค้าง 60%</div>
  </div>