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
.
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
2. CSS: Untuk CSS selengkapnya adalah sebagai barikut.
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.
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
terima kasih atas infonya, bolehlah dicoba :D
[…] Back to tutorial […]
min, kalo cari animasi loading dimana yah? pengen cari efek2 yg bagus min…. kirim ke e-mail aja bisa ?
thanks
Coba disini – http://www.ajaxload.info/
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.
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
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’
Dibagian mana tu? di Demo nya jalan kok
Ow, di codingan yang di artikel ya? oke Thanks, FIXED.
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
Sip, thanks koreksinya, kamu teliti sekali :)
Sip min :)
kebetulan lagi baca kemren2 :D
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…
Ya coba aja download script nya lalu jalankan, kalau mau tau diletakan dimana, ya liat aja struktur script nya, kan sudah jelas
Thanks minho, lumayan. teruslah posting ! semangat semangat
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??
hm…mending pahami dulu cara make, bingung jawab pertanyaan begini.
Biasanya di header.php
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
Coba baca ini -> http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled
semoga membantu :)
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?
itu tergantung kecepatan internet nya sih
keren mas bro,, tutorial yang sangat membantu.. saya akan coba terapkan
punya q loading animasinya kok ndak berhenti2 ya gan?
padahal scrip sama
Kalau script sama ga mungkin loading terus :)
Mungkin kamu tidak terkoneksi dengan internet, soalnya pada contoh diatas gambarnya diload dari flickr
admin bisa gak kalau loadingnya tidak online.. ?
Makasih ini yang saya cari
Maaf min,izin ya min buat gunain cara admin hehe,ampe full copy nh
mau tanya gan, kan webnya belum di hosting, scriptnya udah ane coba, tapi tetp muter2 loading, cara redirect ke halaman lain gmna?
terimakasih jawabannya
om bagaimana caranya menampilkan gambar diatas animasi gif ?
bro, cara include ke form login gimana ya? maaf new be
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
Sudah kami perbaiki, terima kasih koreksinya.
masih mumet mas ,, mungkin perlu dibaca berkali2 , maksih mas tutornya
ini nih yg ane cari2, thanks min