
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>

- Bootstrap 5 Get Started
- Bootstrap 5 Container
- Bootstrap 5 Grid Basic
- Bootstrap 5 Typography
- Bootstrap 5 Colors
- Bootstrap 5 Tables
- Bootstrap 5 Images
- Bootstrap 5 Jambotron
- Bootstrap 5 Alerts
- Bootstrap 5 สร้างปุ่มกดสวย ๆ
- Bootstrap 5 การจัดกลุ่มให้ปุ่มกด
- Bootstrap 5 การสร้าง Badge
- Bootstrap 5 การสร้าง Progress Bar
- Bootstrap 5 การสร้าง Spinner
- Bootstrap 5 กับการแบ่งหน้า
- Bootstrap 5 การสร้าง List Groups
- Bootstrap 5 การใช้งาน Card
- Bootstrap 5 การสร้าง Dropdown Menu
- Bootstrap 5 Collapse
- Bootstrap 5 Navs
- Bootstrap 5 Navbars
- Bootstrap 5 Carousel
- Bootstrap 5 Modal
- Bootstrap 5 Tooltip
- Bootstrap 5 Popover
- Bootstrap 5 Toasts
- Bootstrap 5 Scrollspy
- Bootstrap 5 Offcanvas
- Bootstrap 5 Utilities
- Bootstrap 5 Flex
- Bootstrap 5 Forms
- Bootstrap 5 Select
- Bootstrap 5 Checkboxes and Radio buttons
- Bootstrap 5 Range
- Bootstrap 5 Input Groups
- Bootstrap 5 Form Floating Labels
- Bootstrap 5 Form Validation
- Bootstrap 5 Grid System
- Bootstrap 5 Grid Stacked to horizontal
- Bootstrap 5 Grid Extra Small
- Bootstrap 5 Grid Small
- Bootstrap 5 Grid Medium
- Bootstrap 5 Grid Large
- Bootstrap 5 Grid Extra Large
- Bootstrap 5 Grid XXL
- Bootstrap 5 Grid Examples