Setelah membuat progress bar sederhana untuk loading web, kali ini penulis mencoba membuat spin loader menggunakan JavaScript, dimana spin loader ini seperti progress bar tetapi memiliki bentuk cincin berputar bukan berupa batang. Fungsi spin loader ini juga sama seperti progress bar, yaitu untuk memberikan informasi kepada pengguna apa yang sedang terjadi ketika peramban sedang memuat laman web kita.
 |
| Tampilan Spin Loader Sederhana |
Sebenarnya kode spin loader ini bukan murni buatan penulis, tetapi penulis mengambil dari forum di Internet tetapi penulis ubah sehingga lebih mudah kita gunakan. Tanpa panjang lebar lagi, mari kita buat spin loader sederhana ini...
Pertama, sisipkan kode CSS (Cascading Style Sheet) ini setelah tag <title> didalam <head>, berikut ini potongan kodenya untuk desain dan warna spin loader:
<style>
/* Center the loader */
.loader {
position: absolute;
left: 50%;
top: 15%;
z-index: 1;
width: 50px;
height: 50px;
margin: -76px 0 0 -76px;
border: 16px solid #555;
border-radius: 50%;
border-top: 16px solid #3498db;
-webkit-animation: spin 0.5s linear infinite;
animation: spin 0.5s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
/* Center the loader */
.loader {
position: absolute;
left: 50%;
top: 15%;
z-index: 1;
width: 50px;
height: 50px;
margin: -76px 0 0 -76px;
border: 16px solid #555;
border-radius: 50%;
border-top: 16px solid #3498db;
-webkit-animation: spin 0.5s linear infinite;
animation: spin 0.5s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
Kedua, sisipkan kode JavaScript setelah tag <body>, berikut ini potongan kodenya untuk menampilkan spin loader:
<script>
/* Start create layer for progress dialog */
document.write("<div id=\"myLoader\" class=\"loader\">");
document.write("</div>");
/* End of create layer for progress dialog */
</script>
/* Start create layer for progress dialog */
document.write("<div id=\"myLoader\" class=\"loader\">");
document.write("</div>");
/* End of create layer for progress dialog */
</script>
Ketika langkah kedua ini anda taruh, maka secara otomatis spin loader ini akan aktif dengan sendirinya. Sehingga apabila anda ingin mematikan atau menghilangkan spin loader ini cukup dengan menggunakan perintah JavaScript ini:
document.getElementById("myLoader").style.display = "none";
Gunakan perintah diatas dan letakkan diakhir proses loading laman web anda agar terjadi sinkronisasi ketika spin loader hilang maka laman web anda sudah tertampil utuh. Bila anda ingin menampilkan kembali spin loader ini, cukup gunakan gunakan perintah JavaScript ini:
document.getElementById("myLoader").style.display = "block";
Cukup mudah bukan membuat spin loader sederhana? Semoga tulisan singkat ini bermanfaat bagi anda sekalian.. Silahkan mencoba dan semoga berhasil..
Tidak ada komentar:
Posting Komentar