Pemintal
Nyatakan keadaan pemuatan komponen atau halaman dengan pemintal Bootstrap, dibina sepenuhnya dengan HTML, CSS dan tiada JavaScript.
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>
.
prefers-reduced-motion
pertanyaan 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-color
bermakna 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>
border-color
utiliti? Setiap pemintal sempadan menentukan
transparent
sempadan 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 rem
s, currentColor
, dan display: inline-flex
. Ini bermakna saiznya boleh diubah, diwarnakan semula dan diselaraskan dengan cepat.
Margin
Gunakan utiliti margin seperti .m-5
untuk 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>
<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-sm
dan .spinner-grow-sm
buat 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;
}
}