สปินเนอร์

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

ในหน้านี้

เกี่ยวกับ

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

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

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

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

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

html

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

สี

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

html

<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}ยูทิลิตี้จะแทนที่สิ่งนั้น

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

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

html

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

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

html

<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การเว้นวรรคอย่างง่าย

html

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ตำแหน่ง

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

เฟล็กซ์

html

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

กำลังโหลด...

html

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

ลอยน้ำ

html

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

จัดข้อความ

html

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

ขนาด

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

html

<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 ที่กำหนดเองหรือสไตล์อินไลน์เพื่อเปลี่ยนขนาดตามต้องการ

html

<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>

ปุ่ม

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

html

<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>

html

<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>

CSS

ตัวแปร

เพิ่มใน v5.2.0

ในฐานะที่เป็นส่วนหนึ่งของแนวทางตัวแปร CSS ที่พัฒนาขึ้นของ Bootstrap ตอนนี้สปินเนอร์ใช้ตัวแปร CSS ใน เครื่อง .spinner-borderและ.spinner-growสำหรับการปรับแต่งแบบเรียลไทม์ที่ได้รับการปรับปรุง ค่าสำหรับตัวแปร CSS ถูกกำหนดผ่าน Sass ดังนั้นยังคงรองรับการปรับแต่ง Sass ด้วยเช่นกัน

ตัวแปรสปินเนอร์เส้นขอบ:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

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

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

สำหรับสปินเนอร์ทั้งสอง คลาสตัวปรับแต่งสปินเนอร์ขนาดเล็กจะใช้ในการอัปเดตค่าของตัวแปร CSS เหล่านี้ตามต้องการ ตัวอย่างเช่น.spinner-border-smชั้นเรียนทำสิ่งต่อไปนี้:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

ตัวแปร Sass

$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;
  }
}