Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4

Spinners Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 dasar untuk pemula. setelah sebelumnya kita belajar tentang komponen scrollspy bootstrap, Untuk melanjutkan seri tutorial dasar bootstrap 4 di www.malasngoding.com, pada tutorial bootstrap 4 bagian 32 ini kita akan belajar tentang komponen spinners bootstrap 4.

Spinners Bootstrap 4

Spinners adalah komponen dari bootstrap yang berguna untuk membuat efek loading website.

Dan yang akan kita bahas pada Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4 ini diantaranya adalah cara membuat efek loading (spinner) sederhana, belajar mengubah warna nya, mengatur ukuran, posisi dan mencoba menerapkan efek loading spinner ini ke komponen tombol.

Dan jenis spinner yang bisa kita buat dengan bootstrap 4 ada 2 jenis, yaitu border spinner dan growing spinner.

Border spinner adalah efek loading yang berbentuk garis yang berputar melingkar. Sedangkan growing spinner adalah efek loading yang berbentuk titik yang tumbuh membesar lalu memudar.

Penasaran bagaimana bentuk efek spinner dan cara membuatnya? mari ikuti penjelasan cara membuat loading website menggunakan bootstrap berikut.

Kembali diingatkan untuk teman-teman yang belum membaca cara menggunakan dan menghubungkan file bootstrap, silahkan teman-teman baca dulu tutorial bootstrap 4 sebelumnya tentang cara menghubungkan dan menggunakan bootstrap 4.

Membuat Efek Loading Spinners Dengan Bootstrap 4

Seperti yang sudah dijelaskan sebelumnya, ada 2 buah jenis efek loading yang disediakan di bootstrap 4, yaitu border spinner, dan growing spinner.

Efek Loading Border Spinner dan Growing Spinner

Silahkan perhatikan contoh spinner sederhana berikut.

Untuk membuat spinner bootstrap, caranya cukup mudah, kita tinggal menyediakan sebuah elemen <div> .. </div>. Kemudian buat class .spinner-border atau class .spinner-grow di dalamnya.

Gunakan class .spinner-border jika teman-tema ingin membuat spinner border, dan gunakan class .spinner-grow jika teman-teman ingin membuat spinner growing.

Perhatikan contoh berikut.

Jika dijalankan, hasilnya akan seperti berikut.

spinners bootstrap 4

Seperti yang terlihat dari hasil gambar di atas. Spinner telah selesai dan tampil sebagaimana mestinya.

Spinner yang berada di atas ada lah spinner border, dan yang di bawah adalah spinner growing.

Tinggal teman-teman pilih sesuai keinginan kira-kira ingin menggunakan yang mana. 🙂

Mengubah Warna Efek Loading Spinner

Dari gambar efek loading yang sudah teman-teman lihat sebelumnya, spinner hanya berwarna hitam.

Tapi tenang, bootstrap juga menyediakan opsi untuk merubah warna spinner atau efek loading tersebut.

Caranya pun cukup mudah. Kita tinggal menambahkan class untuk mengubah warna text dari bootstrap.

Diantaranya ada :

• text-primary
  untuk mengubah menjadi warna biru.
• text-secondary
  untuk mengubah menjadi warna abu-abu.
• text-success
  untuk mengubah menjadi warna hijau.
• text-danger
  untuk mengubah menjadi warna merah.
• text-warning
  untuk mengubah menjadi warna kuning.
• text-info
  untuk mengubah menjadi warna biru toska.
• text-light
  untuk mengubah menjadi warna abu-abu terang, hampir putih.
• text-dark
  untuk mengubah menjadi warna hitam.

Class warna di atas bisa langsung teman-teman tuliskan beriringan dengan class .spinner-border atau .spinner-grow.

Contoh :

Dan hasilnya seperti berikut.

warna spinners bootstrap 4

Mengubah Ukuran Efek Loading Spinner

Jika teman-teman ingin mengubah ukuran dari spinner, teman-teman bisa langsung menambahkan class .spinner-border-sm beriringan dengan class .spinner-border atau .spinner-grow.

class .spinner-border-sm akan merubah ukuran spinner menjadi lebih kecil.

Atau teman-teman juga bisa langsung menuliskan perintah css width dan height. dengan satuan rem.

Contoh:

Dan hasilnya akan seperti berikut.

ukuran spinner bootstrap 4

Seperti yang terlihat pada gambar di atas, pada spinner pertama kita menggunakan class .spinner-border-sm atau .spinner-grow-sm untuk membuat spinner yang berukuran kecil.

Dan pada spinner selanjutnya kita mengubah ukuran spinnernya dengan langsung menuliskan perintah css dengan menggunakan satuan rem. Untuk membuktikan bahwa ukuran dari spinner bisa langsung di ubah dengan perintah css secara manual.

Mengubah Posisi Efek Loading

Kita masuk ke tahap mengubah atau mengatur posisi dari si spinner ini.

Untuk memindahkan posisi dari spinner, ada banyak cara yang bisa kita gunakan, yaitu dengan teknik float, flex dan text alignment dari bootstrap.

Sebagai contoh

Dan hasilnya seperti berikut.

posisi efek loading spinner bootstrap 4

Nah, Spinner pun berhasil tampil sebagaimana mestinya.

Membuat Efek Loading Pada Tombol

Kita juga bisa membuat efek animasi loading ini pada tombol.

Baca juga tutorial bootstrap 4 sebelumnya tentang cara membuat tombol dengan bootstrap 4.

Caranya sangat mudah. teman-teman tinggal menempatkan spinner yang sudah teman-teman pelajari sebelumnya ke dalam tombol bootstrap.

Contohnya

Dan hasilnya seperti berikut.

efek animasi pada tombol

Oke teman-teman, sampai di sini selesai sudah materi tentang cara membuat efek animasi loading dengan manggunakan bootstrap.

Silahkan teman-teman bereksperimen sendiri, dengan mengubah-ubah class yang sudah dijelaskan, agar kita bisa membedakan dan mengetahui kegunaan dari masing-masing class tersebut.

Baca Juga tutorial cara membuat efek animasi dengan CSS3.

dan dokumentasi spinners dari situs bootstrap bisa baca di sini.

Seluruh demo dan source code dari tutorial ini bisa teman-teman lihat pada link berikut.

Demo

Download Source Code