Bootstrap 4 Pemintal
Pemintal
Untuk membuat pemintal/pemuat, gunakan .spinner-border
kelas:
Memuat..
Contoh
<div class="spinner-border"></div>
Pemintal Berwarna
Gunakan utilitas warna teks apa pun untuk menambahkan warna ke pemintal:
Memuat..
Memuat..
Memuat..
Memuat..
Memuat..
Memuat..
Memuat..
Memuat..
Memuat..
Contoh
<div class="spinner-border text-muted"></div>
<div class="spinner-border
text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border
text-warning"></div>
<div class="spinner-border text-danger"></div>
<div
class="spinner-border text-secondary"></div>
<div class="spinner-border
text-dark"></div>
<div class="spinner-border text-light"></div>
Tumbuh Pemintal
Gunakan .spinner-grow
kelas jika Anda ingin pemintal/pemuat tumbuh alih-alih "berputar":
Memuat..
Memuat..
Memuat..
Memuat..
Memuat..
Memuat..
Memuat..
Memuat..
Memuat..
Contoh
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div
class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
Ukuran Pemintal:
Gunakan .spinner-border-sm
atau .spinner-grow-sm
untuk membuat pemintal yang lebih kecil:
Memuat..
Memuat..
Contoh
<div class="spinner-border
spinner-border-sm"></div>
<div class="spinner-grow
spinner-grow-sm"></div>
Tombol Pemintal
Anda juga dapat menambahkan pemintal ke tombol, dengan atau tanpa teks:
Contoh
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>