Membuat Animasi Loading

Website akan lebih menarik apabila saat pertama kali kita membukanya, muncul sebuah animasi loading. Animasi ini biasanya sering kita jumpai pada website yang lebih banyak gambar atau fotonya seperti website promosi film, website artis dan lain  – lain. akan tetapi animasi loading ini kurang pas jika diterapkan pada website yg memiliki akses cepat seperti misalnya website portal berita.

Cara kerjanya adalah Dengan bantuan JQuery, Animasi loading akan muncul selama website masih dimuat dan menghilang ketika website sudah siap ditampilkan secara menyeluruh.

Cara membuatnya bagaimana ? Silahkan ikuti langkah – langkah berikut :

1. Tambahkan kode HTML  Animasi Loading

<div id="loading">
	<ul id="spinners">
	<li class="active" data-id="1">
		<div id="preloader_1">
  			<span></span>
  			<span></span>
  			<span></span>
  			<span></span>
  			<span></span>
  		</div>
  	</li>
  </ul>
</div>

2. Tambahkan kode CSS  Animasi Loading

#preloader_1{
            position: relative;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
}

3. Tambahkan kode JavaScript yang menjalankan Animasi Loading

<!-- jQuery Plugin -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	 
	<!-- Preloader -->
	<script type="text/javascript">
		$(window).load(function() { $("#loading").fadeOut("slow"); })
	</script>

DEMO

DEMO MACAM – MACAM ANIMASI LOADING

DOWNLOAD