Kita akan meneruskan pembahasan mengenai bootstrap tutorial yang sebelumnya membahas mengenai Toast Bootstrap: Bootstrap Tutorial #13. Pada tutorial bootstrap #14 ini kita akan membahas mengenai komponen Spinners.
Spinners adalah salah satu komponen bootstrap yang digunakan untuk membuat efek loading pada web. Komponen ini banyak digunakan untuk memperindah efek dari web yang dibuat. Meskipun terlihat ada animasi, Spinner dibuat berdasarkan murni menggunakan HTML dan CSS tanpa menggunakan JavaScript. Hal ini bukan berarti kita tidak membutuhkan JavaScript, Javascript tetap dibutuhkan seperti untuk mengatur visibilitasnya.
Tampilan, ukuran, dan letak dari Spinnners bootstrap dapat diatur dengan mudah menggunakan class-class yang telah ada dalam bootstrap. Spinners pada bootstrap dibedakan menjadi 2 jenis:
- Border Spinners, yaitu spinners yang berbentuk garis berputar dan melingkar
- Growth Spinners, yaitu jenis Spinners yang bisa “tumbuh”. Dari yang awal kecil semakin menjadi besar.
Sebelum kita lanjutkan pastikan teman – teman telah mempunyai repository bootstrapnya ya atau masukkan script dibawah dalam tag <head>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
Langsung saja kita mulai !!!
Section Artikel
Basic Spinners
Pada Dasarnya spinner dibuat dengan mengggunakan tag <div> yang diberi class, yaitu .spinner-border untuk membuat spinner jenis border spinner atau .spinner-grow untuk membuat spinner jenis growth spinner.
contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p>Untuk membuat spinner border gunakan class: <code>.spinner-border</code></p>
<div class="spinner-border"></div>
<p>Untuk membuat spinner Growth gunakan class: <code>.spinner-grow</code></p>
<div class="spinner-grow"></div>
</div>
</body>
</html>Warna Spinners
Seperti halnya komponen bootstrap lain seperti Button, Spinner juga dapat diberi warna agar tampilan lebih indah dan sesuai dengan tema website. Untuk melakukan hal ini kita hanya perlu menambahkan class untuk mengubah warna dari bootstrap itu sendiri yaitu
| Class | Keterangan |
|---|---|
| text-muted | untuk warna abu-abu gelap |
| text-primary | untuk warna biru |
| text-success | untuk warna hijau |
| text-info | untuk warna biru tua |
| text-warning | untuk warna kuning |
| text-danger | untuk warna merah |
| text-secondary | untuk warna abu-abu |
| text-dark | untuk warna hitam |
| text-light | untuk warna putih |
Clas-class diatas digunakan bersamaan dengan class .spinner-border atau .spinner-grow. Contohnya seperti dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p>text-muted:</p>
<div class="spinner-border text-muted"></div> <div class="spinner-grow text-muted"></div>
<p>text-primary:</p>
<div class="spinner-border text-primary"></div> <div class="spinner-grow text-primary"></div>
<p>text-success:</p>
<div class="spinner-border text-success"></div> <div class="spinner-grow text-success"></div>
<p>text-info:</p>
<div class="spinner-border text-info"></div> <div class="spinner-grow text-info"></div>
<p>text-warning:</p>
<div class="spinner-border text-warning"></div> <div class="spinner-grow text-warning"></div>
<p>text-danger:</p>
<div class="spinner-border text-danger"></div> <div class="spinner-grow text-danger"></div>
<p>text-secondary:</p>
<div class="spinner-border text-secondary"></div> <div class="spinner-grow text-secondary"></div>
<p>text-dark:</p>
<div class="spinner-border text-dark"></div>
<div style="background-color: black;">
<p class="text-light">text-light:</p>
<div class="spinner-border text-light"></div> <div class="spinner-grow text-light"></div>
</div>
</div>
</body>
</html>Ukuran Spinners
Selain mengatur warna kita juga dapat mengatur ukuran dari spinner yaitu dengan hanya menambahkan class .spinner-border-sm untuk merubah spinner menjadi lebih kecil dan class .spinner-border-lguntuk merubah spinner menjadi lebih besar. Cara penggunaan class ini yaitu digunakan beriringan setelah class .spinner-border atau .spinner-grow.
Selain menggunakan class-class diatas kita juga dapat mengatur height dan weight spinner dengan menggunakan css.
contoh script nya adalah:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <p>Ukuran Spinner dengan class .spinner-border-sm: </p> <div class="spinner-border spinner-border-sm"></div> <div class="spinner-grow spinner-grow-sm"></div> <p>Ukuran Spinner dengan class .spinner-border-lg: </p> <div class="spinner-border spinner-border-lg"></div> <div class="spinner-grow spinner-grow-lg"></div> <p>Ukuran Spinner dengan css: </p> <div class="spinner-border" style="width: 5rem;height: 5rem"></div> <div class="spinner-grow" style="width: 5rem;height: 5rem"></div> </div> </body> </html>
Posisi Spinners
Spinner pada bootstrap dibuat dengan menggunakan komponen rem, currentColor dan display: inline-flex. komponen ini dapat dengan mudah mengubah diubah ukuran, posisi serta warnanya.
Untuk mengatur posisi nya dapat menggunakan class flexbox, float, dan text-alignment untuk menempatkan spinner pada posisi yang teman – teman inginkan.
contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<p>Posisi ditengah</p>
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
</div>
</div>
<hr/>
<p>Posisi Spinner dikanan dengan penempatan tulisan dikiri (class flex)</p>
<div class="d-flex align-items-center">
<strong>tunggu...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
<hr/>
<p>Posisi Di kanan (class clearfix)</p>
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">tunggu...</span>
</div>
</div>
<hr/>
<p>Posisi ditengah (class text-center)</p>
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</body>
</html>Efek Spinners pada Tombol
Efek spinner juga dapat ditempatkan dalam button untuk menambah variasi dari tampilan button website teman – teman . cara nya dengan memasukkan spinner ke dalam tag <button>. Biar tidak membingungkan silahkan lihat contoh dibawah:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<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-lg"></span>
Tunggu..
</button>
<button class="btn btn-primary">
<span class="spinner-grow spinner-border-sm"></span>
Tunggu..
</button>
<button class="btn btn-primary">
<span class="spinner-grow spinner-grow-lg"></span>
Tunggu..
</button>
</div>
</body>
</html>Sekian penjelasan mengenai spinner bootstrap khususnya bootstrap 4, untuk hal lain dapat teman – teman variasi dengan menggunakan CSS atau mengubah class- class sehingga dapat lebih mengerti lagi kegunaannya.
