Membuat Animasi Loading Saat Pertama Membuka Website

TWD Editorial URL:http://www.tutorial-webdesign.com/yUfwP
May 23rd, 2013 Tutorial, Web Design 34 Comments

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.


	<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 © 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;
		}
		#loading {
			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

Follow @tut_web

Tags:

Sort URL http://www.tutorial-webdesign.com/yUfwP
Back To Top

Penulis :

TWD Editorial

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

http://tutorial-webdesign.com

Comments

34 thoughts on “Membuat Animasi Loading Saat Pertama Membuka Website”

Muh. Al-Fatih says:

May 26, 2013 at 19:49

terima kasih atas infonya, bolehlah dicoba :D

Reply
cik nu ieu fungsin a naon nya | Blog says:

May 30, 2013 at 06:15

[…] Back to tutorial […]

Reply
Yogi says:

June 3, 2013 at 14:29

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

thanks

Reply
- TWD Editorial says:
  
  June 3, 2013 at 16:05
  
  Coba disini – http://www.ajaxload.info/
  
  Reply
cemewew says:

June 13, 2013 at 14:28

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

Reply
- TWD Editorial says:
  
  June 13, 2013 at 15:04
  
  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.
  
  Reply
  - apikkondang says:
    
    August 16, 2015 at 17:59
    
    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
    
    Reply
Reza says:

June 14, 2013 at 13:23

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’

Reply
- TWD Editorial says:
  
  June 14, 2013 at 13:27
  
  Dibagian mana tu? di Demo nya jalan kok
  
  Reply
- TWD Editorial says:
  
  June 14, 2013 at 13:32
  
  Ow, di codingan yang di artikel ya? oke Thanks, FIXED.
  
  Reply
  - Reza says:
    
    June 17, 2013 at 19:10
    
    iya min, di css nya id nya masih pake #spinner tuh :)
    pake #loading aja atuh biar gak ngebingungin , oh iya tapi saya gak download filenya sih cuman liat di blog aja. mungkin gak ada yang nanya gara2 kalo di file download nya id nya sama :D CMIIW
    
    Reply
    - TWD Editorial says:
      
      June 17, 2013 at 20:02
      
      Sip, thanks koreksinya, kamu teliti sekali :)
      
      Reply
      - Reza says:
        
        June 18, 2013 at 15:24
        
        Sip min :)
        kebetulan lagi baca kemren2 :D
syarif says:

June 22, 2013 at 20:39

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…

Reply
- TWD Editorial says:
  
  June 22, 2013 at 21:36
  
  Ya coba aja download script nya lalu jalankan, kalau mau tau diletakan dimana, ya liat aja struktur script nya, kan sudah jelas
  
  Reply
Wahyu Widyantoro says:

June 27, 2013 at 19:29

Thanks minho, lumayan. teruslah posting ! semangat semangat

Reply
syamsul says:

October 16, 2013 at 16:04

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

Reply
- TWD Editorial says:
  
  October 16, 2013 at 23:01
  
  hm…mending pahami dulu cara make, bingung jawab pertanyaan begini.
  
  Biasanya di header.php
  
  Reply
fajar says:

April 30, 2014 at 00:42

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

Reply
- TWD Editorial says:
  
  May 1, 2014 at 21:42
  
  Coba baca ini -> http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled
  
  semoga membantu :)
  
  Reply
rocky says:

June 21, 2014 at 10:25

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?

Reply
- TWD Editorial says:
  
  June 21, 2014 at 10:55
  
  itu tergantung kecepatan internet nya sih
  
  Reply
airvan_4 says:

July 4, 2014 at 11:15

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

Reply
@Ru says:

November 12, 2014 at 22:29

punya q loading animasinya kok ndak berhenti2 ya gan?

padahal scrip sama

Reply
- TWD Editorial says:
  
  November 13, 2014 at 09:30
  
  Kalau script sama ga mungkin loading terus :)
  Mungkin kamu tidak terkoneksi dengan internet, soalnya pada contoh diatas gambarnya diload dari flickr
  
  Reply
@adhe_403 says:

March 23, 2015 at 17:18

admin bisa gak kalau loadingnya tidak online.. ?

Reply
Alvira Mohamad says:

March 25, 2015 at 20:41

Makasih ini yang saya cari

Reply
Adib Askari says:

October 27, 2015 at 11:13

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

Reply
Rival says:

November 18, 2015 at 22:19

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

Reply
ebe says:

February 3, 2016 at 09:59

om bagaimana caranya menampilkan gambar diatas animasi gif ?

Reply
Radit says:

April 7, 2016 at 08:29

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

Reply
Allaude says:

January 6, 2017 at 11:00

itu ente di penjelasan kok beda ID gan coba di cek, ente pake id loading atau spinner, buat orang awam kalo prakteknya liat penjelasan pasti ga jadi

Reply
- TWD Editorial says:
  
  January 7, 2017 at 22:09
  
  Sudah kami perbaiki, terima kasih koreksinya.
  
  Reply
andika says:

March 21, 2017 at 09:12

masih mumet mas ,, mungkin perlu dibaca berkali2 , maksih mas tutornya

Reply