This post is also available in:
English
Hallo apa kabar teman semyanya, kali ini kita akan membahas Preloader ketika halaman website di muat. Ini sangat bermanfaat untuk teman teman ketika membuat website. kita di sini menggunakan kode dari jQuery, CSS dan HTML kita sudah bisa membuat preloader pada halaman website kita.
Keuntungan menggunakan preloader dihalaman website menurut saya sangat bagus karena membuat pengunjung tidak berburuk sangka terlebih dahulu ketika melihat tampilan website kita acak-acakan karena semua kode belum dimuat seluruhnya, dengan adanya preloader halaman website akan ditutupi sepenuhnya oleh preloader dan ketika semua kode telah dimuat oleh browser maka preloader akan otomatis menghilang dari hadapan pengunjung.
Kekurangan mengguankan preloader dihalaman website menurut saya, mungkin bisa membuat jenuh dan bosan pengunjung ketika koneksi internet pengunjung tersebut sedang lambat dan ditambah dengan melihat animasi loading yang kita tampilkan hanya berputar-putar saja dan sedangkan preloader ini akan hilang jika halaman website sudah dimuat seluruhnya.
Step by step
1. Persiapkan jQuery dengan versi terbaru.
2. Buat dokumen baru dengan format HTML. Disini saya akan membuat semua coding menjadi satu file.
3. Tuliskan struktur HTML pada dokumen tersebut.
4. Pada bagian tag <head> panggil file jQuery seperti ini:
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
5. Kemudian tuliskan juga beberapa baris kode CSS pada tag yang sama yaitu tag <head>.
<style type="text/css">
.wrapperanimate{
width:200px;
height:60px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
.circle{
width:20px;
height:20px;
position: absolute;
border-radius: 50%;
background-color: #fff;
left:15%;
transform-origin: 50%;
animation: circle .5s alternate infinite ease;
}
@keyframes circle{
0%{
top:60px;
height:5px;
border-radius: 50px 50px 25px 25px;
transform: scaleX(1.7);
}
40%{
height:20px;
border-radius: 50%;
transform: scaleX(1);
}
100%{
top:0%;
}
}
.circle:nth-child(2){
left:45%;
animation-delay: .2s;
}
.circle:nth-child(3){
left:auto;
right:15%;
animation-delay: .3s;
}
.shadow{
width:20px;
height:4px;
border-radius: 50%;
background-color: rgba(0,0,0,.5);
position: absolute;
top:62px;
transform-origin: 50%;
z-index: -1;
left:15%;
filter: blur(1px);
animation: shadow .5s alternate infinite ease;
}
@keyframes shadow{
0%{
transform: scaleX(1.5);
}
40%{
transform: scaleX(1);
opacity: .7;
}
100%{
transform: scaleX(.2);
opacity: .4;
}
}
.shadow:nth-child(4){
left: 45%;
animation-delay: .2s
}
.shadow:nth-child(5){
left:auto;
right:15%;
animation-delay: .3s;
}
.wrapperanimate span{
position: absolute;
top:75px;
font-family: 'Lato';
font-size: 20px;
letter-spacing: 12px;
color: #fff;
left:15%;
}
</style>6. Tampilkan preloader pada tag <body>.
<div class="wrapperanimate">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<span>Loading</span>
</div>7. Silahkan jalankan dokumen HTML tersebut di browser, kalau sesuai akan tampil seperti berikut.
8. Kok gak loadingnya gak berhenti-berhenti? sabar dulu, karena kita belum memberikan perintah jQuery untuk preloader menutup secara otomatis. Jadi gimana caranya? caranya mudah, tambahkan baris kode berikut dibagian tag <head> saya sarankan taruh dibagian bawah kode untuk memanggil file jQuery.
<script>
$(document).ready(function(){
$(".preloader").fadeOut();
})
</script>9. Silahkan jalankan kembail dibrowser, kok loadingnya langsung hilang? memang seperti itu karena kita menjalankannya dikomputer kita sendiri bukan diinternet.
Demikian tutorial kali ini sya buat, semoga bermanfaat.
Terimakasih.
