สปินเนอร์
ระบุสถานะการโหลดของส่วนประกอบหรือหน้าด้วยสปินเนอร์ Bootstrap ซึ่งสร้างด้วย HTML, CSS ทั้งหมด และไม่มี JavaScript
เกี่ยวกับ
Bootstrap “สปินเนอร์” สามารถใช้เพื่อแสดงสถานะการโหลดในโครงการของคุณ สร้างขึ้นด้วย HTML และ CSS เท่านั้น ซึ่งหมายความว่าคุณไม่จำเป็นต้องใช้ JavaScript เพื่อสร้าง อย่างไรก็ตาม คุณจะต้องใช้ JavaScript ที่กำหนดเองเพื่อสลับการมองเห็น รูปลักษณ์ การจัดตำแหน่ง และขนาดสามารถปรับแต่งได้อย่างง่ายดายด้วยคลาสยูทิลิตี้ที่น่าทึ่งของเรา
เพื่อวัตถุประสงค์ในการเข้าถึง ตัวโหลดแต่ละตัวที่นี่จะรวมrole="status"
ไฟล์<span class="sr-only">Loading...</span>
.
prefers-reduced-motion
คิวรีสื่อ ดู
ส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา
เครื่องปั่นขอบ
ใช้สปินเนอร์เส้นขอบสำหรับตัวบ่งชี้การโหลดที่มีน้ำหนักเบา
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
สี
เส้นขอบหมุนใช้currentColor
สำหรับของมันborder-color
หมายความว่าคุณสามารถปรับแต่งสีด้วยยูทิลิตี้สีข้อความ คุณสามารถใช้ยูทิลิตี้สีข้อความของเรากับสปินเนอร์มาตรฐานได้
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
border-color
ยูทิลิตี้? สปินเนอร์เส้นขอบแต่ละตัวระบุ
transparent
เส้นขอบอย่างน้อยหนึ่งด้าน ดังนั้น
.border-{color}
ยูทิลิตี้จะแทนที่สิ่งนั้น
สปินเนอร์ที่กำลังเติบโต
หากคุณไม่ชอบสปินเนอร์แบบเส้นขอบ ให้เปลี่ยนไปใช้สปินเนอร์แบบขยาย แม้ว่าในทางเทคนิคจะไม่หมุน แต่ก็เติบโตซ้ำแล้วซ้ำอีก!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
อีกครั้งหนึ่ง สปินเนอร์นี้สร้างด้วยcurrentColor
ดังนั้นคุณสามารถเปลี่ยนรูปลักษณ์ได้อย่างง่ายดายด้วย ยูทิลิ ตี้สีข้อความ นี่คือสีน้ำเงินพร้อมกับตัวแปรที่รองรับ
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
การจัดตำแหน่ง
สปินเนอร์ ใน Bootstrap สร้างด้วยrem
s, currentColor
, และdisplay: inline-flex
. ซึ่งหมายความว่าสามารถปรับขนาด เปลี่ยนสี และจัดแนวได้อย่างรวดเร็ว
มาร์จิ้น
ใช้ยูทิลิตี้ระยะขอบเช่น.m-5
การเว้นวรรคอย่างง่าย
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
ตำแหน่ง
ใช้ยูทิลิตี้ flexbox ยูทิลิตี้ float หรือยู ทิลิตี้ การจัดตำแหน่งข้อความเพื่อวางสปินเนอร์ในต���แหน่งที่คุณต้องการในทุกสถานการณ์
เฟล็กซ์
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
ลอยน้ำ
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
จัดข้อความ
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
ขนาด
เพิ่ม.spinner-border-sm
และ.spinner-grow-sm
สร้างสปินเนอร์ขนาดเล็กที่สามารถใช้ภายในส่วนประกอบอื่นๆ ได้อย่างรวดเร็ว
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
หรือใช้ CSS ที่กำหนดเองหรือสไตล์อินไลน์เพื่อเปลี่ยนขนาดตามต้องการ
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
ปุ่ม
ใช้สปินเนอร์ภายในปุ่มเพื่อระบุว่ามีการดำเนินการหรือกำลังดำเนินการอยู่ คุณยังสามารถสลับข้อความออกจากองค์ประกอบสปินเนอร์ และใช้ข้อความปุ่มได้ตามต้องการ
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>