Cara Membuat Spinner/Loader di Bootstrap 4

Untuk membuat Spinner/Loader (atau animasi Loading) khususnya pada Bootstrap 4, kita dapat menggunakan class .spinner-border. Contoh:

Bootstrap 4 Spinner

<div class="spinner-border"></div>

Lihat kode di Github | Lihat Live Demo


Spinner/Loader Berwarna

Untuk mengatur warna dari Spinner, kita dapat menggunakan Utility kedalam Spinner. Contoh:

Spinner/Loader Berwarna

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

Lihat kode di Github | Lihat Live Demo

Bentuk Spinner/Loader (Grow)

Kita juga dapat mengubah bentuk atau tipe dari Spinner. Pada Bootstrap 4, kita dapat menggunakan class .spinner-grow. Contoh:

Bentuk Spinner/Loader (Grow)

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

Lihat kode di Github | Lihat Live Demo

Mengatur Ukuran Spinner/Loader

Untuk mengatur ukuran dari Spinner/Loader menjadi kecil, kita dapat menggunakan class .spinner-border-sm atau .spinner-grow-sm. Contoh:

Mengatur Ukuran Spinner/Loader

<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>

Lihat kode di Github | Lihat Live Demo

Spinner/Loader di dalam Tombol

Kita juga dapat menambahkan Spinner/Loader kedalam Tombol dengan teks maupun tanpa menggunakan teks. Contoh:

Spinner/Loader di dalam Tombol

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

Lihat kode di Github | Lihat Live Demo

0 Komentar