ข้ามไปที่เนื้อหาหลัก ข้ามไปที่การนำทางเอกสาร
in English

สปินเนอร์

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

เกี่ยวกับ

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

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

เอฟเฟกต์ภาพเคลื่อนไหวของส่วนประกอบนี้ขึ้นอยู่กับ prefers-reduced-motionคิวรีสื่อ ดู ส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา

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

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

กำลังโหลด...
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

สี

เส้นขอบหมุนใช้currentColorสำหรับของมันborder-colorหมายความว่าคุณสามารถปรับแต่งสีด้วยยูทิลิตี้สีข้อความ คุณสามารถใช้ยูทิลิตี้สีข้อความของเรากับสปินเนอร์มาตรฐานได้

กำลังโหลด...
กำลังโหลด...
กำลังโหลด...
กำลังโหลด...
กำลังโหลด...
กำลังโหลด...
กำลังโหลด...
กำลังโหลด...
<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
ทำไมไม่ใช้border-colorยูทิลิตี้? สปินเนอร์เส้นขอบแต่ละตัวระบุ transparentเส้นขอบอย่างน้อยหนึ่งด้าน ดังนั้น .border-{color}ยูทิลิตี้จะแทนที่สิ่งนั้น

สปินเนอร์ที่กำลังเติบโต

หากคุณไม่ชอบสปินเนอร์แบบเส้นขอบ ให้เปลี่ยนไปใช้สปินเนอร์แบบขยาย แม้ว่าในทางเทคนิคจะไม่หมุน แต่ก็เติบโตซ้ำแล้วซ้ำอีก!

กำลังโหลด...
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

อีกครั้งหนึ่ง สปินเนอร์นี้สร้างด้วยcurrentColorดังนั้นคุณสามารถเปลี่ยนรูปลักษณ์ได้อย่างง่ายดายด้วย ยูทิลิ ตี้สีข้อความ นี่คือสีน้ำเงินพร้อมกับตัวแปรที่รองรับ

กำลังโหลด...
กำลังโหลด...
กำลังโหลด...
กำลังโหลด...
กำลังโหลด...
กำลังโหลด...
กำลังโหลด...
กำลังโหลด...
<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

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

สปินเนอร์ ใน Bootstrap สร้างด้วยrems, currentColor, และdisplay: inline-flex. ซึ่งหมายความว่าสามารถปรับขนาด เปลี่ยนสี และจัดแนวได้อย่างรวดเร็ว

มาร์จิ้น

ใช้ยูทิลิตี้ระยะขอบเช่น.m-5การเว้นวรรคอย่างง่าย

กำลังโหลด...
<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ตำแหน่ง

ใช้ยูทิลิตี้ flexbox ยูทิลิตี้ float หรือยู ทิลิตี้ การจัดตำแหน่งข้อความเพื่อวางสปินเนอร์ในตำแหน่งที่คุณต้องการในทุกสถานการณ์

เฟล็กซ์

กำลังโหลด...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
กำลังโหลด...
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

ลอยน้ำ

กำลังโหลด...
<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

จัดข้อความ

กำลังโหลด...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

ขนาด

เพิ่ม.spinner-border-smและ.spinner-grow-smสร้างสปินเนอร์ขนาดเล็กที่สามารถใช้ภายในส่วนประกอบอื่นๆ ได้อย่างรวดเร็ว

กำลังโหลด...
กำลังโหลด...
<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

หรือใช้ CSS ที่กำหนดเองหรือสไตล์อินไลน์เพื่อเปลี่ยนขนาดตามต้องการ

กำลังโหลด...
กำลังโหลด...
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">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="visually-hidden">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="visually-hidden">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>

ซาส

ตัวแปร

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

คีย์เฟรม

ใช้สำหรับสร้างภาพเคลื่อนไหว CSS สำหรับสปินเนอร์ของเรา รวมอยู่ในscss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}