สอนใช้งาน Bootstrap 4

Bootstrap 4 การใช้งาน Progress Bar

Progress Bar หรือแถบความคืบหน้า (Progress Bar) เป็นส่วนประกอบที่ใช้แสดงสถานะของกระบวนการที่กำลังทำอยู่ โดย Bootstrap 4 มีเครื่องมือให้เราใช้งาน Progress Bar อย่างง่ายดายผ่าน Class และ Attribute ต่าง ๆ ที่เราสามารถปรับแต่งให้เหมาะกับการใช้งานได้

พื้นฐานการใช้งาน Progress Bar

การสร้าง Progress Bar แบบพื้นฐานใน Bootstrap 4 สามารถทำได้โดยการใช้โครงสร้างของ HTML ดังนี้

HTML
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
  • <div class="progress"> คือคอนเทนเนอร์ของ Progress Bar
  • <div class="progress-bar"> คือแถบความคืบหน้า
  • style="width: 50%" กำหนดความกว้างของแถบความคืบหน้าเป็นเปอร์เซ็นต์
  • aria-valuenow="50" ระบุค่าปัจจุบันของแถบ
  • aria-valuemin="0" และ aria-valuemax="100" ระบุค่าต่ำสุดและค่าสูงสุด

ผลลัพธ์จะเป็นแถบที่แสดงความคืบหน้า 50%

Progress Bar แบบกำหนดสี

เราสามารถปรับแต่งสีของ Progress Bar ได้โดยการเพิ่มคลาสสีเพิ่มเติมที่ Bootstrap 4 ให้มาพร้อมกับระบบสีต่าง ๆ เช่น bg-success, bg-info, bg-warning, และ bg-danger ดังตัวอย่าง

HTML
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
  • Progress Bar สีเขียว (bg-success) แสดงความคืบหน้า 25%
  • Progress Bar สีฟ้า (bg-info) แสดงความคืบหน้า 50%
  • Progress Bar สีเหลือง (bg-warning) แสดงความคืบหน้า 75%
  • Progress Bar สีแดง (bg-danger) แสดงความคืบหน้าเต็ม 100%

Progress Bar หลายแถบใน Progress Bar เดียว

เราสามารถแสดงแถบความคืบหน้าหลายแถบภายใน Progress Bar เดียวได้ ซึ่งสามารถใช้แสดงหลายขั้นตอนของกระบวนการที่ซับซ้อนได้ ดังตัวอย่าง

HTML
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-warning" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
  • แถบ Progress Bar แรกจะเป็นสีเขียวแสดงความคืบหน้า 20%
  • แถบถัดมาเป็นสีฟ้าแสดงความคืบหน้า 30%
  • แถบสุดท้ายเป็นสีเหลืองแสดงความคืบหน้า 10%

Progress Bar แบบแถบลายทาง (Striped Progress Bar)

Bootstrap 4 ยังมีคลาส progress-bar-striped ที่จะทำให้แถบมีลวดลายเหมือนลายทาง เพิ่มการมองเห็นความเคลื่อนไหวของกระบวนการ ดังตัวอย่าง

HTML
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
  • แถบ Progress Bar สีฟ้าลายทางแสดงความคืบหน้า 60%

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

เราสามารถเพิ่มการเคลื่อนไหวให้กับ Progress Bar เพื่อแสดงถึงการทำงานอย่างต่อเนื่องด้วยการเพิ่มคลาส progress-bar-animated ดังตัวอย่าง

HTML
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
  • แถบ Progress Bar สีเหลืองลายทาง พร้อมกับการเคลื่อนไหวแสดงความคืบหน้า 80%
Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ