Spinners adalah komponen dari bootstrap yang berguna untuk membuat efek loading website. 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.
Efek Loading Border Spinner dan Growing Spinner
Untuk membuat spinner bootstrap, caranya kita tinggal menyediakan sebuah elemen <div> .. </div>. Kemudian buat class spinner-border atau class spinner-grow di dalamnya.
jika kita ingin membuat spinner border maka gunakan class spinner-border dan jika ingin membuat spinner growing gunakan class spinner-grow.
Perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Spinner Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Spinner Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<br/>
<br/>
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</body>
</html>
Jika dijalankan, hasilnya akan seperti berikut :
Spinner yang berada di atas adalah spinner border dan yang di bawah adalah spinner growing.
Mengubah Warna Efek Loading Spinner
Dari gambar efek loading yang sudah kita buat sebelumnya, spinner hanya berwarna hitam. Bootstrap menyediakan opsi untuk merubah warna spinner atau efek loading tersebut. Caranya 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 kita tuliskan beriringan dengan class spinner-border atau spinner-grow.
Contoh :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Spinner Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Spinner Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
<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-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-success" 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>
</div>
</body>
</html>
Hasilnya seperti berikut :
Mengubah Ukuran Efek Loading Spinner
Jika kita ingin mengubah ukuran dari spinner, kita 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 kita juga bisa langsung menuliskan perintah css width dan height dengan satuan rem.
Contoh :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Spinner Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Spinner Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border" role="status" style="width: 2;height: 2">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border" role="status" style="width: 5rem;height: 5rem">
<span class="sr-only">Loading...</span>
</div>
<br/>
<br/>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" role="status" style="width: 2;height: 2">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" role="status" style="width: 5rem;height: 5rem">
<span class="sr-only">Loading...</span>
</div>
</div>
</body>
</html>
Hasilnya seperti berikut :
Pada gambar di atas, spinner pertama kita menggunakan class spinner-border-sm atau spinner-grow-sm untuk membuat spinner yang berukuran kecil.
Pada spinner selanjutnya kita mengubah ukuran spinnernya dengan langsung menuliskan perintah css dengan menggunakan satuan rem. Untuk membuktikan bahwa ukuran dari spinner bisa langsung diubah dengan perintah css secara manual.
Mengubah Posisi Efek Loading
Untuk memindahkan posisi dari spinner, ada banyak cara yang bisa kita gunakan, yaitu dengan teknik float, flex dan text alignment dari bootstrap.
Contoh :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Spinner Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Spinner Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
posisi spinner di tengah (menggunakan flex)
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<hr/>
posisi spinner di kanan dan tulisan di kiri (mengguakan flex)
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
<hr/>
posisi spinner di kanan (menggunakan float)
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<hr/>
posisi spinner di tengah (class text-center)
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</body>
</html>
Hasilnya seperti berikut :
Membuat Efek Loading Pada Tombol
Untuk materi ini sebaiknya ikuti dahulu tutorial bootstrap sebelumnya tentang cara membuat tombol/button dengan bootstrap 4 pada link berikut ini .
Untuk membuat efek animasi loading ini pada tombol, caranya kita tinggal menempatkan spinner yang sudah kita buat sebelumnya ke dalam tombol bootstrap.
Contoh :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Spinner Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Spinner Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-danger">
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
agussuratna.net
</button>
</div>
</body>
</html>
Hasilnya seperti berikut :
Sampai di sini cara membuat spinner dengan bootstrap, untuk selanjutnya silahkan bereksperimen sendiri, dengan mengubah-ubah class yang sudah dijelaskan, agar kita bisa.
Refesensi :
- https://getbootstrap.com/docs/4.3/components/spinners/
- https://www.malasngoding.com/spinners-bootstrap-4/