Yuuuhhhuu, I’m back again (halaaaahh). Yaw di hari yang cerah dan cukup panas ini saya cukup bahagia, dengan ditemani rasa ngantuk yang luar biasa. Datang dari lembur semalaman di kafe dekat rumah dan langsung mandi untuk bergegas ke pura. Karena hari ini adalah hari raya Galungan bagi umat hindu. Hari raya yang mempunyai makna kemenangan Dharma (kebaikan) melawan Adharma (kejahatan). Setelah dari pura, seperti hari raya Galungan sebelumnya saya berkumpul bersama keluarga dan saudara. Dan disana saya ketemu dengan adik sepupu saya. Si doi bertanya, gimana sih caranya membuat animasi loading selama website masih dimuat oleh browser. Hmm, ini sebenarnya cukup mudah. Kita bisa membuatnya dengan menggunakan library javascript jQuery.
Sebenarnya sangat banyak kemudahan yang disediakan oleh library javascript yang paling yahud dan sangat populer ini. Sudah saya jelaskan begitu kepada adik sepupu saya, tapi si doi ngotot minta dibuatin langkah-langkahnya. Yaw kebetulan mata masih kuat melek, jadi saya akan jelaskan sedikit langkah-langkahnya. Tapi kelihatannya gak keren, yaw maklumlah otak saya cuma otak lulusan S1, bukan otak lulusan S2 :p. Kalau gak keren, harap dimaklumi yaw :). Ini potongan kodenya yang sangat sederhana :
<!doctype html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<title>GedeLumbung.Com</title>
<style>
body{
margin: 0px auto;
}
#loading {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999;
position: fixed;
background: url(http://preloaders.net/preloaders/477/Intersection.gif) 50% 50% no-repeat #fff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function()
{
$("#loading").fadeOut("slow");
}
);
</script>
</head>
<body>
<div id="loading"></div>
<iframe src="http://gedelumbung.com" frameborder="0" width="100%" height="100%" style="position:fixed;"></iframe>
</body>
</html>
Tinggal memanfaatkan API .load() dari jQuery dan sedikit pemanis berupa CSS untuk menampilkan animasi gif. Sederhana kan 😀 ??? Monggo dicoba dulu yaw.
