สปินเนอร์

ระบุสถานะการโหลดของส่วนประกอบหรือหน้าด้วยสปินเนอร์ Bootstrap ซึ่งสร้างด้วย HTML, CSS ทั้งหมด และไม่มี JavaScript

เกี่ยวกับ

Bootstrap “สปินเนอร์” สามารถใช้เพื่อแสดงสถานะการโหลดในโครงการของคุณ สร้างขึ้นด้วย HTML และ CSS เท่านั้น ซึ่งหมายความว่าคุณไม่จำเป็นต้องใช้ JavaScript เพื่อสร้าง อย่างไรก็ตาม คุณจะต้องใช้ JavaScript ที่กำหนดเองเพื่อสลับการมองเห็น รูปลักษณ์ การจัดตำแหน่ง และขนาดสามารถปรับแต่งได้อย่างง่ายดายด้วยคลาสยูทิลิตี้ที่น่าทึ่งของเรา

เพื่อวัตถุประสงค์ในการเข้าถึง ตัวโหลดแต่ละตัวที่นี่จะรวมrole="status"ไฟล์<span class="sr-only">Loading...</span>.

เครื่องปั่นขอบ

ใช้สปินเนอร์เส้นขอบสำหรับตัวบ่งชี้การโหลดที่มีน้ำหนักเบา

<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 สร้างด้วยrems, 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>