Animasi Pesan Loading

Adakalanya kita pengen mempercantik navigasi web kita. Bisa dengan grafis yang menarik, dropdown menu, ataupun dengan animasi flash. Dan ada kalanya user bosan menunggu web kita loading, kita perlu ngasih suatu animasi agar tidak bosan. Seperti halnya animasi proses loading animasi flash yang menampilkan progress loadingnya.

Pesan loading yang akan kita buat tidak perlu animasi flash yang berat, cukup dengan file animasi gif yang kecil sekitar 2kb dan beberapa baris style css dan javascript, maka jadilah animasi pesan loading kita.

Langkah pertama, adalah tulis kode javascript ini di bagian web kamu. Ini untuk memanggil dan menyembunyikan kotak pesan sesuai kebutuhan kamu.

<script>
function showPopup()
{
	if( !document.getElementById ) return;
	document.getElementById('waitpopup').style.display = 'block';
}

function hidePopup()
{
	if( !document.getElementById ) return;
	document.getElementById('waitpopup').style.display = 'none';
}
</script>

Langkah kedua, adalah tulis kode style css ini di bagian sebelum atau kamu bisa pisahkan menjadi file sendiri gabung sama style2 yang lain di file css sendiri. Style ini akan mengatur warna tampilan dari kotak pesan yang akan kamu tampilkan.

<style>
 #waitpopup ,#waitpopuplogin
 {        
 display:none;
 z-index: 100;
 position: absolute;
 background: #ffffff;
 color:#000000;
 padding:10px;
 border: 4px solid #f2f2f2;
 text-align:center;
 top:40%;
 left:40%;
 }
 </style>

Langkah ketiga, adalah menuliskan bagian DIV yang akan menampilkan kotak pesan tunggu.

<div id="waitpopup">
 <br>
 Silahkan Tunggu....<br>
 Sedang mempersiapkan data.<br>
 <img src="<?=base_url()?>images/loadingAnimation.gif">
 <br>
 <br>
 </div>

Yang terakhir jangan lupa, untuk memberi event onload pada body html dengan event untuk menyembunyikan kotak pesan loading. Jadinya seperti ini

onload=”hidePopup();

Dan untuk menampilkan pesan loading cukup panggil function javascriptnya.

silahkan mencoba

wassalam