Bootstrap 4 การใช้งาน Spinner

ใน Bootstrap 4 มีองค์ประกอบที่สามารถใช้งานได้หลากหลายเพื่อสร้างหน้าเว็บไซต์ที่สวยงามและทันสมัย หนึ่งในนั้นคือ Spinner หรือที่เรียกกันว่า ‘Loading Spinner’ ซึ่งใช้เพื่อบอกผู้ใช้งานว่าระบบกำลังทำงาน เช่น กำลังโหลดข้อมูลหรือประมวลผล Spinner มีประโยชน์มากในการแจ้งให้ผู้ใช้ทราบว่ามีการดำเนินการอยู่เบื้องหลัง

การใช้งานพื้นฐานของ Spinner

Bootstrap 4 มี Spinner สองรูปแบบหลัก คือ Border Spinner และ Growing Spinner ซึ่งสามารถใช้งานได้ง่ายผ่านคลาสของ Bootstrap

Border Spinner

Border Spinner เป็นวงกลมที่หมุนได้ตลอดเวลา คลาสที่ใช้คือ spinner-border และสามารถใช้งานได้ดังนี้

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

ในโค้ดตัวอย่างนี้ role="status" จะช่วยให้เครื่องมืออ่านหน้าจอ (screen readers) เข้าใจว่ามีการประมวลผลอยู่ โดยข้อความที่ใช้ sr-only จะไม่แสดงบนหน้าจอ แต่จะถูกอ่านออกมาให้ผู้ใช้ที่มีความบกพร่องทางการมองเห็นทราบ

Growing Spinner

Growing Spinner จะขยายตัวออกเรื่อยๆ คลาสที่ใช้คือ spinner-grow

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

การปรับแต่งขนาดของ Spinner

Bootstrap 4 รองรับการปรับแต่งขนาดของ Spinner ผ่านการเพิ่มคลาส spinner-border-sm หรือ spinner-grow-sm สำหรับการย่อขนาด

ตัวอย่าง Border Spinner ขนาดเล็ก

<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

ตัวอย่าง Growing Spinner ขนาดเล็ก

<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

การเปลี่ยนสีของ Spinner

การเปลี่ยนสีของ Spinner สามารถทำได้ง่ายๆ โดยการใช้คลาสของ Bootstrap ที่เกี่ยวกับสี เช่น text-primary, text-danger, text-warning เป็นต้น ซึ่งจะเปลี่ยนสีของ Spinner ตามสีที่เลือก

ตัวอย่าง Border Spinner สีแดง

<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>

ตัวอย่าง Growing Spinner สีเขียว

<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>

การจัดตำแหน่ง Spinner

การจัดตำแหน่ง Spinner สามารถทำได้โดยใช้คลาสการจัดตำแหน่งของ Bootstrap เช่น d-flex, justify-content-center, align-items-center เป็นต้น เพื่อให้ Spinner อยู่ตรงกลางหรืออยู่ในตำแหน่งที่ต้องการ

ตัวอย่างการจัด Spinner ให้อยู่ตรงกลางของหน้า

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

การใช้งาน Spinner ภายในปุ่ม

การนำ Spinner มาใช้ในปุ่ม (Button) จะช่วยแสดงถึงการประมวลผลที่เกิดขึ้นในขณะที่ผู้ใช้งานกดปุ่ม โดยสามารถแทรก Spinner ลงในปุ่มพร้อมกับข้อความได้ดังนี้

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

ตัวอย่างการประยุกต์ใช้งาน Spinner หลายแบบ

<div class="container">
  <!-- Border Spinner ขนาดปกติสีแดง -->
  <div class="spinner-border text-danger" role="status">
    <span class="sr-only">Loading...</span>
  </div>

  <!-- Growing Spinner ขนาดเล็กสีเขียว -->
  <div class="spinner-grow spinner-grow-sm text-success" role="status">
    <span class="sr-only">Loading...</span>
  </div>

  <!-- Spinner ภายในปุ่ม -->
  <button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    Processing...
  </button>

  <!-- Spinner อยู่ตรงกลางของหน้า -->
  <div class="d-flex justify-content-center my-5">
    <div class="spinner-grow text-info" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>

สรุป

Spinner ใน Bootstrap 4 เป็นเครื่องมือที่ช่วยแสดงผลการประมวลผลหรือการทำงานของระบบให้ผู้ใช้งานทราบ โดยสามารถปรับแต่งได้หลายรูปแบบตามต้องการ ไม่ว่าจะเป็นการปรับขนาด สี หรือการจัดตำแหน่ง นอกจากนี้ยังสามารถนำไปประยุกต์ใช้ภายในปุ่มหรือองค์ประกอบอื่นๆ ได้อย่างง่ายดายตามความเหมาะสม