Spinner
Spinner digunakan untuk menunjukkan status pemuatan web kalian. Spinner dibuat dengan menggunakan html dan css, kalian tidak perlu javascript untuk memanggilnya. Tetapi, javascript tetap diperlukan untuk mengubah visibilitasnya. Bootstrap telah menyediakan 2 jenis spinner yang dapat disesuaikan dengan kebutuhan pengguna. Klik tautan berikut ini untuk melihat dokumentasi lengkapnya https://getbootstrap.com/docs/4.4/components/spinners/2 Jenis spinner itu adalah border spinner dan growing spinner.Border spinner digunakan untuk indikator pemuat halaman yang ringan, berbentuk garis yang menyerupai lingkaran sempurna dan terus berputar sampai website selesai di load. Lalu ada growing spinner, berbentuk titik yang terus membesar. Keduanya bisa kalian kostumisasi sesuai warna, ukuran dan penempatannya. Ok, langsung saja kita buat spinnernya di bawah ini.
Cara Membuat Spinner dengan Bootstrap
- 1. Buat halaman baru bernama spinner.html
- 2. Lalu tambahkan bootstrap CDN di dalamnya, ikuti script di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Preloader</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<center>
<div class="jumbotron">
<h1>Hello Sahretech</h1>
</div>
</center>
</body>
</html>
- 3. Lalu tambahkan spinner border di bawah tag <body>
<div class="preloader">
<div class="loading">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
- 4. lalu tambahkan style pada spinner, tambah tag <style></style> di antara tag <head></head>
<style type="text/css">
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #fff;
}
.loading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font: 14px arial;
}
</style>
- 5. Langkah terakhir tambahkan javascript sebelum </body> fungsinya untuk menghentikan spinner saat dokumen telah dimuat 100%. kalian juga dapat menset durasinya dengan mengganti tulisan "slow" dengan angka 1000 = 1 detik, dan berlaku kelipatannya
<script>
$(document).ready(function() {
$(".preloader").fadeOut("slow");
});
</script>
- 6. Lalu jalankan, maka tampilannya akan seperti gambar di bawah ini. untuk improvisasi bisa kalian coba-coba sendiri dengan gaya spinner lain.
Berikut coding lengkapnya
<!DOCTYPE html>
<html>
<head>
<title>Preloader</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<style type="text/css">
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #fff;
}
.preloader .loading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font: 14px arial;
}
</style>
<script>
$(window).load(function() {
$(".preloader").fadeOut("slow");
});
</script>
</head>
<body>
<div class="preloader">
<div class="loading">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<center>
<div class="jumbotron">
<h1>Hello Sahretech</h1>
</div>
</center>
</body>
</html>
Sekian tutorial membuat preloader cantik dengan bootstrap 4. Semoga tutorial singkat ini dapat membantu kalian semua. Kurang lebihnya saya mohon maaf, apabila ada kritik, saran dan pertanyaan silahkan tinggalkan di kolom komentar di bawah ini. Happy coding :)
Terima kasih sharingnya Gan. Izin saya pake script-nya buat salah satu materi di channel Youtube saya ya. Link web ini akan saya insert di kolom deskripsi videonya :)
ReplyDeleteterima kasih atas kunjugannya, dan terima kasih atas bantuannya. Semoga chnanelnya sukses
Delete