Membuat Animasi Loading dengan Jquery

Di zaman web 2 ini, kita tidak terlalu sulit untuk membuat website super interaktif. Berkat bantuan Jquery, kita bisa membuat pertunjukan seindah flash atau aplikasi desktop. Salah satu bentuk website modern adalah yang terdapat animasi loading. Selain mempercantik halaman, juga bisa membantu pengunjung memprediksi berapa lama lagi halaman atau aplikasi yang diminta akan terbuka.


Berikut langkah-langkah membuat Animasi Loading dengan Jquery


1) Download UI Jquery di http://jqueryui.com/download

2) Jalankan Dreamweaver dan buat file html baru.

3) Masukkan CSS dan JS Jquery dengan cara mengetikkan skrip di bawah ini

<link type="text/css" href="css/black-tie/jquery-ui-1.8.21.custom.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

Perhatikan tulisan black-tie pada baris skrip pertama, ganti dengan nama theme Jquery yang Anda pilih. Misalnya UI Lightness.

5) Ketikkan skrip di bawah ini

<script type="text/javascript">



var proses=0;



var henti=0;

$(document).ready(function(){





mulai();







});

function mulai(){



myVar=setInterval(function(){tambahProses()},1000);

}





function tambahProses(){



proses+=1;

$( "#progressbar" ).progressbar({

value: proses

});



}



function ganti(){



if(henti==0){

henti=1;

document.getElementById('tombol').innerHTML='<img src="gambar/PlayHot.png" name="kotak1" width="50" height="50" id="kotak1" onclick="ganti()" />';

document.getElementById('tulisTombol').innerHTML='Play';

clearInterval(myVar)

}else{

henti=0;

document.getElementById('tombol').innerHTML='<img src="gambar/player-pause.png" name="kotak1" width="50" height="50" id="kotak1" onclick="ganti()" />';

mulai();

document.getElementById('tulisTombol').innerHTML='Pause';

}





}

</script>

6) Carilah 2 buah ikon. Satu ikon pause dan satu lagi ikon play. Beri nama masing-masing file tersebut sebagai player-pause.png dan PlayHot.png kemudian taruh di dalam folder gambar



7) Ketikkan skrip berikut pada bagian body.

<p align="center">Loading dengan Jquery </p>

<div id="progressbar"></div>

<div style="display: none;" class="demo-description">

<p>Default determinate progress bar.</p>

</div>

<table width="173" border="0" align="center">

<tr>

<td><div align="center" id="tombol"><img src="gambar/player-pause.png" name="kotak1" width="50" height="50" id="kotak1" onclick="ganti()" /></div></td>

</tr>

<tr>

<td width="167"><div align="center" id="tulisTombol">Pause</div></td>

</tr>

</table>

8) Buka halaman tersebut di browser. Anda akan melihat animasi loading. Anda juga dapat mengklik pause dan play pada halaman tersebut untuk memberhentikan dan memulai animasi loading.




Animasi Loading telah selesai dibuat.

Download Source Code : http://www.mediafire.com/?5wycj7cjj4ty4d7

Jika Anda ingin membahas artikel ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^.