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>.
Pemintal perbatasan
Gunakan pemintal perbatasan untuk indikator pemuatan ringan.
Memuat...
warna
Pemintal perbatasan menggunakan untuknya currentColor, yang border-colorberarti Anda dapat menyesuaikan warna dengan utilitas warna teks . Anda dapat menggunakan salah satu utilitas warna teks kami pada pemintal standar.
Memuat...
Memuat...
Memuat...
Memuat...
Memuat...
Memuat...
Memuat...
Memuat...
Mengapa tidak menggunakan border-colorutilitas? Setiap pemintal perbatasan menentukan transparentbatas 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!
Memuat...
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.
Memuat...
Memuat...
Memuat...
Memuat...
Memuat...
Memuat...
Memuat...
Memuat...
Penyelarasan
Pemintal di Bootstrap dibuat dengan rems, currentColor, dan display: inline-flex. Ini berarti mereka dapat dengan mudah diubah ukurannya, diwarnai ulang, dan disejajarkan dengan cepat.
Gunakan utilitas flexbox , utilitas float , atau utilitas perataan teks untuk menempatkan pemintal tepat di tempat yang Anda butuhkan dalam situasi apa pun.
Melenturkan
Memuat...
Memuat...
mengapung
Memuat...
Perataan teks
Memuat...
Ukuran
Tambahkan .spinner-border-smdan .spinner-grow-smbuat pemintal yang lebih kecil yang dapat dengan cepat digunakan di dalam komponen lain.
Memuat...
Memuat...
Atau, gunakan CSS khusus atau gaya sebaris untuk mengubah dimensi sesuai kebutuhan.
Memuat...
Memuat...
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.