Pemintal
Tunjukkan status pemuatan komponen atau halaman dengan pemintal Bootstrap, yang seluruhnya dibuat dengan HTML, CSS, dan tanpa JavaScript.
Tentang
Bootstrap "spinners" dapat digunakan untuk menunjukkan status pemuatan di proyek Anda. Mereka dibuat hanya dengan HTML dan CSS, artinya Anda tidak memerlukan JavaScript apa pun untuk membuatnya. Namun, Anda akan memerlukan beberapa JavaScript khusus untuk mengaktifkan visibilitasnya. Penampilan, keselarasan, dan ukurannya dapat dengan mudah disesuaikan dengan kelas utilitas kami yang luar biasa.
Untuk tujuan aksesibilitas, setiap pemuat di sini menyertakan role="status"
dan file <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
kueri media. Lihat bagian
pengurangan gerakan pada dokumentasi aksesibilitas kami .
Pemintal perbatasan
Gunakan pemintal perbatasan untuk indikator pemuatan ringan.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
warna
Pemintal perbatasan menggunakan untuknya currentColor
, yang border-color
berarti Anda dapat menyesuaikan warna dengan utilitas warna teks . Anda dapat menggunakan salah satu utilitas warna teks kami pada pemintal standar.
<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
utilitas? Setiap pemintal perbatasan menentukan
transparent
batas untuk setidaknya satu sisi, sehingga
.border-{color}
utilitas akan menimpanya.
Tumbuh pemintal
Jika Anda tidak menyukai pemintal perbatasan, beralihlah ke pemintal tumbuh. Meskipun secara teknis tidak berputar, ia tumbuh berulang kali!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Sekali lagi, pemintal ini dibuat dengan currentColor
, sehingga Anda dapat dengan mudah mengubah tampilannya dengan utilitas warna teks . Ini dia dengan warna biru, bersama dengan varian yang didukung.
<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>
Penyelarasan
Pemintal di Bootstrap dibuat dengan rem
s, currentColor
, dan display: inline-flex
. Ini berarti mereka dapat dengan mudah diubah ukurannya, diwarnai ulang, dan disejajarkan dengan cepat.
Batas
Gunakan utilitas margin seperti .m-5
untuk jarak yang mudah.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Penempatan
Gunakan utilitas flexbox , utilitas float , atau utilitas perataan teks untuk menempatkan pemintal tepat di tempat yang Anda butuhkan dalam situasi apa pun.
Melenturkan
<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>
mengapung
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Perataan teks
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Ukuran
Tambahkan .spinner-border-sm
dan .spinner-grow-sm
buat pemintal yang lebih kecil yang dapat dengan cepat digunakan di dalam komponen lain.
<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>
Atau, gunakan CSS khusus atau gaya sebaris untuk mengubah dimensi sesuai kebutuhan.
<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>
Tombol
Gunakan pemintal di dalam tombol untuk menunjukkan tindakan yang sedang diproses atau sedang berlangsung. Anda juga dapat menukar teks dari elemen pemintal dan menggunakan teks tombol sesuai kebutuhan.
<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>