Selamat Datang

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

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:

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


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

	<div class="container">
		<header>
			<h1>Tutorial-webdesign.com</h1>
			<h3>Contoh Menampilkan Animasi Loading Saat Pertama Kali Membuka Website</h3>
			<p>Back to tutorial: http://www.tutorial-webdesign.com/memutar-video-di-website-flv-mp4</p>
		</header>

		<div class="main">
				<div class="content">
					<img src="http://farm9.staticflickr.com/8091/8591840409_d2a5f99cb3_z.jpg" alt="">
					<img src="http://farm7.staticflickr.com/6032/6370515893_c457ce468c_z.jpg" alt="">
					.....
					Gambar Lainnya

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

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

	</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

		#loading {
			position: fixed;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			z-index: 9999;
			background: url(http://dashboard.wordpress.com/i/loading/fresh-64.gif) 50% 50% no-repeat #ede9df;
		}

2. CSS: Untuk CSS selengkapnya adalah sebagai barikut.

		body{
			background:#ddd;
		}
		#spinner {
			position: fixed;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			z-index: 9999;
			background: url(http://pixolid.com/site_images/loading.gif) 50% 50% no-repeat #ede9df;
		}
		.container{
			width: 728px;
			margin: 0 auto;
			padding: 20px;
			background: #fff;
		}
		header{
			padding: 30px 0;
		}
		header h2,
		header p{
			padding: 0;margin: 20px 0;
		}
		header small{
			padding: 0;margin: 0;
		}
		.content img{
			width: 240px;
			height: 200px;
		}
		.content iframe{
			margin: 20px 0;
			padding: 20px 0;
		}

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.

	<script type="text/javascript">
		$(window).load(function() { $("#loading").fadeOut("slow"); })
	</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





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

31 thoughts on “Membuat Animasi Loading Saat Pertama Membuka Website

  1. terima kasih atas infonya, bolehlah dicoba :D

  2. cik nu ieu fungsin a naon nya | Blog says:

    […] Back to tutorial […]

  3. Yogi says:

    min, kalo cari animasi loading dimana yah? pengen cari efek2 yg bagus min…. kirim ke e-mail aja bisa ?

    thanks

  4. cemewew says:

    mas, klo mau loadingnya lebih lama atau kita nentuin loadingnya berapa detik gmn yah?

    • Yang namanya loading itu kan “proses pengambilan data”, ya animasi nya selama data dimuat, kalau mau cepat ya tergantung server dan kecepatan internet nya donk.

      Kalau pake waktu berarti bukan loading namanya, tapi sekedar hiasan.

      • apikkondang says:

        klo diakasih waktu gimana gan?
        soalnya file sudah terakses tapi masih kaku (file swf) kalo langsung di tampilin jadinya g enak diolah, lebi baik agak dilamain gitu gan, biar hasilnya lbih enak di oprasiin dan lebih prima

  5. Reza says:

    min, ini barangkali ada yg bingung kenapa gak jalan animasi loading nya
    itu id di css nya spinner , cuman pas di html nya id nya loading.
    tinggal disamain aja namanya kalo mau pake spinner berarti di html dan css nya namanya sama ‘spinner’

  6. syarif says:

    mas ane pendatang baru ne alias awam mengenai website,,,ane ngambang ne mengenai website,,,mungkin karena dasarnya belum ada hanya bermodalkan “kemauan dan kesungguhan”,,,,di mana sich di letakkan Script2 tersebut,,,mohon bimbingannya,,,tanks atas perhatiannya…

  7. Thanks minho, lumayan. teruslah posting ! semangat semangat

  8. syamsul says:

    maaf mas mau tanya. saya sangat tertarik untuk menerapkan tutorial ini di web saya. kebetulan web sy pakai wordpress

    oh ya kalau di wordpres , file script kode-kode diatas ditaruh dimana ya??

  9. fajar says:

    Gan Mau Nanya nih Misal Fitur Javascript dalam web browser nya dinonaktifkan, berrti web tidak akan tampil dong jika pake animasi loading itu
    hanya blank putih saja..
    bisa kasih suatu kondisi ga saat js non aktif fitur loading dihilangkan

  10. rocky says:

    terima kasih saya udah coba dan berhasil.
    tapi loadingnya terlalu cepat jadi cuman kelihatan sebentar animasinya. cara ngatur waktu supaya animasinya aga lama gimana yah?

  11. airvan_4 says:

    keren mas bro,, tutorial yang sangat membantu.. saya akan coba terapkan

  12. @Ru says:

    punya q loading animasinya kok ndak berhenti2 ya gan?

    padahal scrip sama

  13. @adhe_403 says:

    admin bisa gak kalau loadingnya tidak online.. ?

  14. Makasih ini yang saya cari

  15. Adib Askari says:

    Maaf min,izin ya min buat gunain cara admin hehe,ampe full copy nh

  16. Rival says:

    mau tanya gan, kan webnya belum di hosting, scriptnya udah ane coba, tapi tetp muter2 loading, cara redirect ke halaman lain gmna?
    terimakasih jawabannya

  17. ebe says:

    om bagaimana caranya menampilkan gambar diatas animasi gif ?

  18. Radit says:

    bro, cara include ke form login gimana ya? maaf new be

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development