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

Progress Bar ก็คือ แถบสถานะที่บ่งบอกความคืบหน้าของงานหรือกิจกรรมบางอย่าง เพื่อให้รู้ว่างานนั้น ๆ คืบหน้าไปแล้วเท่าไหร่ ใกล้เสร็จหรือยัง เป็นต้น

เราสามารถใช้ Bootstrap 5 สร้าง Progress Bar ได้ โดยการสร้างเอลิเมนต์ <div> ขึ้นมา 1 อัน เพื่อทำหน้าที่เป็น Container และกำหนดคลาส .progress ให้กับเอลิเมนต์ดังกล่าว

หลังจากนั้น สร้างเอลิเมนต์ <div> ขึ้นมาอีกหนึ่งอัน ภายในเอลิเมนต์ <div> ที่สร้างไว้ทีแรก และกำหนดคลาส .progress-bar และในเอลิเมนต์เดียวกันนี้ ให้กำหนด style width เป็นเปอร์เซ็นต์ เพื่อกำหนดความกว้างของ Progress Bar ดังตัวอย่าง

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

การกำหนดความสูงให้ Progress Bar

ความสูงของ Progress Bar จะอยู่ที่ 1rem (ประมาณ 16px) แต่เราสามารถกำหนดความสูงของ Progress Bar เองได้ โดยการกำหนดพร็อพเพอร์ตี้ height โดยต้องกำหนด 2 จุด คือทั้งที่ Container และที่ตัว Progress Bar

  <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>

การแสดงข้อความกำกับ Progress Bar

ถ้าต้องการแสดงข้อความกำกับ Progress Bar เพื่อบ่งบอกบางอย่าง เช่น บ่งบอกสถานะ บ่งบอกเปอร์เซ็นต์ความคืนหน้า เป็นต้น ก็สามารถทำได้เช่ยเดียวกัน

  <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>

การกำหนดสีสันให้ Progress Bar

โดยปกติ Progress Bar จะเป็นสีน้ำเงิน (primary) แต่เราสามารถกำหนดสีให้ Progress Bar เป็นสีอื่น ๆ ได้ โดยใช้คลาสประเภท contextual background classes ดังนี้

  <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>

Progress Bar แบบ Striped

ถ้าไม่ชอบ Progress Bar แบบสีเดียวทึบ ๆ ก็สามารถสร้าง Progress Bar แบบ Striped ได้ โดยใช้งานคลาส .progress-bar-striped

  <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>

Progress Bar แบบเคลื่อนไหว

ถ้า Progress Bar แบบนิ่ง ๆ มันดูเชยเกินไป หรือไม่น่าสนใจ เราก็สามารถสร้าง Progress Bar แบบเคลื่อนไหวนิด ๆ ได้เช่นกัน โดยการใช้งานคลาส .progress-bar-animated

  <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>

Progress Bar หลายอัน อยู่ด้วยกัน

เราสามารถสร้าง Progress Bar หลาย ๆ อัน ให้อยู่ด้วยกันได้ โดยการสร้างไว้ภายใน Container เดียวกัน

  <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>