Membuat Animasi Loading Saat Pertama Membuka Website

Menampilkan animasi loading saat pertama membuka website dengan menggunakan Jquery cukup menarik untuk diterapkan di website kita, banyak orang beranggapan dari pada loading begitu saja, lebih keren jika ada animasi loading nya.
Biasanya website yang banyak menerapkan itu website bertipe portfolio, website promosi film, website artis, website media, dan lainnya. Namun kurang cocok untuk website yang butuh akses cepat seperti website berita atau portal berita.

Image by : Misocrazy

Animasi loading akan muncul selama website di-load / dimuat semuanya, setelah semua siap, baru halaman ditampilkan secara sempurna, hal ini biasanya sering kita lihat di website berbasis Flash. Namun disini kita membuatnya dengan jquery.
Nah bagaimana menerapkan hal tersebut? pada kesempatan ini tutorial-webdesign.com akan coba bahas secara sederhana, silahkan ikuti langkah-langkah berikut.

Peralatan:

• Pattern untuk Background
• Jquery
• Animasi Loading (gif)
• Gambar (gambar untuk demo dialmbil dari flickr.com)

1. Buat sebuah file HTML dengan nama index.html lalu tuliskan script berikut ini di dalam body & /body.

1	<div id="loading"></div>

2

3	<div class="container">

4

<header>

5	<h1>Tutorial-webdesign.com</h1>

6	<h3>Contoh Menampilkan Animasi Loading Saat Pertama Kali Membuka Website</h3>

7	<p>Back to tutorial: http://www.tutorial-webdesign.com/memutar-video-di-website-flv-mp4</p>

8

</header>

9

10	<div class="main">

11	<div class="content">

12	<img src="http://farm9.staticflickr.com/8091/8591840409_d2a5f99cb3_z.jpg" alt="">

13	<img src="http://farm7.staticflickr.com/6032/6370515893_c457ce468c_z.jpg" alt="">

14

.....

15	Gambar Lainnya

16

17	</div> <!-- /.content -->

18	</div> <!-- /.main -->

19

20

<footer>

21	Copyright &copy; 2013 By <a href="http://www.tutorial-webdesign.com">Tutorial-webdesign.com</a>

22

</footer>

23

24	</div> <!-- /.container -->

yang perlu diperhatikan dari script diatas adalah bagian ID loading div id="loading".
Karena di div itulah animasi akan diletakan, dengan bantuan CSS div loading tersebut dibuat agar tampil penuh, fullscreen 100% layar monitor, dan background nya ditentukan yaitu sebuah file .gif

1	#spinner {

2	position: fixed;

3	left: 0px;

4

top: 0px;

5	width: 100%;

6	height: 100%;

7	z-index: 9999;

8	50% no-repeat #ede9df;

9

}

2. CSS: Untuk CSS selengkapnya adalah sebagai barikut.

1

body{

2	background:#ddd;

3

}

4	#spinner {

5	position: fixed;

6	left: 0px;

7

top: 0px;

8	width: 100%;

9	height: 100%;

10	z-index: 9999;

11	background: url(http://pixolid.com/site_images/loading.gif) 50% 50% no-repeat #ede9df;

12

}

13	.container{

14	width: 728px;

15	margin: 0 auto;

16	padding: 20px;

17	background: #fff;

18

}

19

header{

20	padding: 30px 0;

21

}

22	header h2,

23

header p{

24	padding: 0;margin: 20px 0;

25

}

26	header small{

27	padding: 0;margin: 0;

28

}

29	.content img{

30	width: 240px;

31	height: 200px;

32

}

33	.content iframe{

34	margin: 20px 0;

35	padding: 20px 0;

36

}

3. JQUERY: Untuk mengetahui website itu sedang di load atau telah selesai di load maka kita membutuhkan javascript, disini kita menggunakan Jquery, script nya cukup sederhana, dan hanya membutuhkan satu atau 2 baris saja, jangan lupa untuk menyisipkan jquery sebelumnya.

1	<script type="text/javascript">

2	$(window).load(function() { $("#loading").fadeOut("slow"); })

3

</script>

Ketika website selesai di muat / di-load semua, div #loading akan disembunyikan secara perlahan (Fade Out Slow).
Hasil.
Untuk melihat apa yang telah kita buat bisa dengan klik demo dibawah ini dan jika ingin mencoba anda bisa mendownload scripnya, scriptnya dan jalankan di komputer anda, pastikan internet anda harus jalan kalau menjalankannya karena gambar yang kita load ada di internet, jika tidak terkoneksi maka loading tidak akan berhenti. Anda bisa menggantinya dengan gambar yang ada dikomputer anda untuk memastikan gambar di load secara keseluruhan.

DEMO | Download Script

Sekian
Sekian tutorial kali ini, cukup mudah bukan? dan terlihat elegan untuk ditampilkan di website anda.
Silahkan dikembangkan agar lebih baik.
Selamat berkreasi, Salam Web Design Indonesia


sumber  :http://www.tutorial-webdesign.com/menampilkan-animasi-loading-saat-pertama-membuka-website/