Bootstrap 5 โปรแกรมโหลด
- หน้าก่อนหน้า BS5 สายวิธี
- หน้าต่อไป BS5 หน้าเพจ
โหลดเติบโต
เพื่อสร้าง spinner/โหลดเติบโต ให้ใช้ .spinner-border ประเภท：
ตัวอย่าง
<div class="spinner-border"></div>
โหลดเติบโตสี
ใช้สีของข้อความอื่นๆเพื่อเพิ่มสีให้กับ spinner ด้วย utilities：
ตัวอย่าง
<div class="spinner-border text-muted"></div> <div class="spinner-border text-primary"></div> <div class="spinner-border text-success"></div> <div class="spinner-border text-info"></div> <div class="spinner-border text-warning"></div> <div class="spinner-border text-danger"></div> <div class="spinner-border text-secondary"></div> <div class="spinner-border text-dark"></div> <div class="spinner-border text-light"></div>
โหลดเติบโต
หากคุณต้องการให้ spinner/โหลดเติบโตแทนที่จะ "หมุน" ให้ใช้ .spinner-grow ประเภท：
ตัวอย่าง
<div class="spinner-grow text-muted"></div> <div class="spinner-grow text-primary"></div> <div class="spinner-grow text-success"></div> <div class="spinner-grow text-info"></div> <div class="spinner-grow text-warning"></div> <div class="spinner-grow text-danger"></div> <div class="spinner-grow text-secondary"></div> <div class="spinner-grow text-dark"></div> <div class="spinner-grow text-light"></div>
ขนาดโหลดเข้า
ใช้ .spinner-border-sm หรือ .spinner-grow-sm สร้างโหลดเล็กกว่า:
ตัวอย่าง
<div class="spinner-border spinner-border-sm"></div> <div class="spinner-grow spinner-grow-sm"></div>
ปุ่มโหลดเข้า
คุณยังสามารถเพิ่มโหลดเข้าปุ่ม ไม่ว่าจะมีข้อความหรือไม่:
ตัวอย่าง
<button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> </button> <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> <button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> <button class="btn btn-primary" disabled> <span class="spinner-grow spinner-grow-sm"></span> Loading.. </button>
- หน้าก่อนหน้า BS5 สายวิธี
- หน้าต่อไป BS5 หน้าเพจ
