Pemintal

Nyatakan keadaan pemuatan komponen atau halaman dengan pemintal Bootstrap, dibina sepenuhnya dengan HTML, CSS dan tiada JavaScript.

Pada halaman ini

Tentang

"Pemutar" Bootstrap boleh digunakan untuk menunjukkan keadaan pemuatan dalam projek anda. Ia dibina hanya dengan HTML dan CSS, bermakna anda tidak memerlukan sebarang JavaScript untuk menciptanya. Walau bagaimanapun, anda memerlukan beberapa JavaScript tersuai untuk menogol keterlihatan mereka. Penampilan, penjajaran dan saiznya boleh disesuaikan dengan mudah dengan kelas utiliti kami yang menakjubkan.

Untuk tujuan kebolehaksesan, setiap pemuat di sini termasuk role="status"dan bersarang <span class="visually-hidden">Loading...</span>.

Kesan animasi komponen ini bergantung pada prefers-reduced-motionpertanyaan media. Lihat bahagian gerakan yang dikurangkan dalam dokumentasi kebolehaksesan kami .

Pemintal sempadan

Gunakan pemutar sempadan untuk penunjuk pemuatan ringan.

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

Warna

Pemintal sempadan menggunakan untuknya currentColor, border-colorbermakna anda boleh menyesuaikan warna dengan utiliti warna teks . Anda boleh menggunakan mana-mana utiliti warna teks kami pada pemutar standard.

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

Mengapa tidak menggunakan border-colorutiliti? Setiap pemintal sempadan menentukan transparentsempadan untuk sekurang-kurangnya satu bahagian, jadi .border-{color}utiliti akan mengatasinya.

Pemintal yang semakin membesar

Jika anda tidak menyukai pemutar sempadan, tukar kepada pemutar tumbuh. Walaupun ia tidak berputar secara teknikal, ia berulang kali berkembang!

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

Sekali lagi, pemutar ini dibina dengan currentColor, jadi anda boleh menukar penampilannya dengan mudah menggunakan utiliti warna teks . Ini adalah dalam warna biru, bersama-sama dengan varian yang disokong.

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

Penjajaran

Pemintal dalam Bootstrap dibina dengan rems, currentColor, dan display: inline-flex. Ini bermakna saiznya boleh diubah, diwarnakan semula dan diselaraskan dengan cepat.

Margin

Gunakan utiliti margin seperti .m-5untuk jarak yang mudah.

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

Penempatan

Gunakan utiliti flexbox , utiliti apungan atau utiliti penjajaran teks untuk meletakkan pemutar tepat di tempat yang anda perlukan dalam apa jua keadaan.

Flex

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

Memuatkan...

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

Terapung

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

Jajaran teks

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

Saiz

Tambah .spinner-border-smdan .spinner-grow-smbuat pemutar yang lebih kecil yang boleh digunakan dengan cepat dalam komponen lain.

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

Atau, gunakan CSS tersuai atau gaya sebaris untuk menukar dimensi mengikut keperluan.

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

Butang

Gunakan pemutar dalam butang untuk menunjukkan tindakan sedang diproses atau sedang berlaku. Anda juga boleh menukar teks daripada elemen pemutar dan menggunakan teks butang mengikut keperluan.

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

Sass

Pembolehubah

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

Bingkai utama

Digunakan untuk mencipta animasi CSS untuk pemutar kami. Termasuk dalam scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}