Home
Guestbook
About
Message
FeedMemiliki blog yg atraktif merupakan dambaan setiap orang, salah satunya dengan memasang widget-widget pendukung yg tujuannya untuk mempercantik tampilan blog supaya pengunjung betah berlama-lama di blog kesayangan kita.
OK Sobat, kali ini blog Cyber4rt.wapsite.me hadir kembali dengan tutorial Membuat animasi Loading dan Progressbar dengan jQuery. Tentu sudah tidak asing lagi kan jika dengar kata itu? Tapi jangan kabur dulu sob! Seperti biasa, ane akan membuat pembaharuan supaya lebih ringkas dan tidak sama persis dengan yg sudah ada di blog tetangga. Buat apa posting panjang lebar tapi script-nya sudah pasaran di mesin pencari. Iya ngga sob?
Nah, jika sobat sudah mulai bosan dengan tampilan loading yg begitu-begitu saja alangkah baiknya jika sobat melirik postingan ini, kan bagus tuh sambil menunggu blog selesai di muat ada animasi loading yg lucu-lucu gitu. Itung-itung buat hiburan saat koneksi Internet sedang tidak stabil sob! hhe..
Mungkin sobat akan bertanya. Apakah dapat mempengaruhi peforma loading blog? Kalau itu sih tergantung blog milik sobat, kalau emang loadingnya tidak berat mau dikasih animasi loading juga tidak masalah.. Pada dasarnya animasi loading itu menggunakan Event .load() Bukan hanya DOM selesai di muat, tapi setelah iframe gambar dan sejenisnya sudah komplit barulah Event .load() akan bekerja.
Oke langsung saja kita praktekkan cara membuatnya. Pertama kita memerlukan sebuah plugin jQuery seperti ini: <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> terserah mau pasang dimana, asal jangan di jidat aja, hhe.. Jika sudah ada abaikan saja, lanjutkan pasang script ini di bawahnya.
<script type="text/javascript">
$(document).ready(function() {
$("#hidden").css('display', 'block');
$("#progress-bar").animate({width:"65%"}, 2000); });
$(window).bind('load', function() {
$("#progress-bar").stop().animate({width:"100%"}, 1000, function() {
$("#hidden").fadeOut(3000); }); });
</script>
Jika sudah selesai kita buat css seperti contoh dibawah, letakkan di dalam tag head. URL gambar silahkan di ganti.
<style type="text/css">
#hidden {display:none}
#progress-bar {position:fixed;z-index:9999;top:0;left:0;width:0;height:2px;background-color:#4aa6e7}
#loading {position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background:#000 url(url-gambar-loading.gif) center no-repeat}
</style>
Yang terakhir adalah tag HTML nya. Misalkan script di atas disimpan dengan nama "loading.js" dan "style.css".
<html><head> <title>Membuat animasi Loading dan Progressbar dengan jQuery</title> <link rel="stylesheet" type="text/css" href="style.css" media="all,handheld" /> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="loading.js"></script> </head><body> <div id="hidden"> <div id="progress-bar"></div><div id="loading"></div> </div> <!-- konten situs anda --> </body></html>
Selesai. Jika kita perhatikan tag HTML diatas ID loading dan progress-bar di bungkus oleh <div id="hidden"></div> Itu berfungsi untuk menghindari browser yg tidak support javascript supaya animasi loading tidak menutupi halaman. Untuk melihat demonya silahkan klik link di bawah ini.
Script diatas adalah contoh sederhana dari "Membuat animasi Loading dan Progressbar dengan jQuery". Tentu sobat dapat membuat yg lebih menarik dan atraktif misalnya dengan menambah teks, waktu muat dan sebagainya. Sekian untuk postingan kali ini, tunggu artikel menarik seputar jQuery lainnya hanya di Cyber4rt.wapsite.me.
