blogDevsoft88blogDevsoft88Shared publicly - 10/06/2016 09:07

Membuat Animasi Page Loading Dengan jQuery


Kategori:


BLOG.DEVSOFT.COM | Kok bisa yaa.. membuat animasi loading padahal page html dalam keadaan refresh??,, jawabannya adalah tentu saja bisa, dengan bantuan jQuery dan sedikit kreatifitas kita bisa membuat itu.

Di jQuery ada suatu methode yang dipakai dalam event loading yaitu methode .bind(); ada banyak event yang didukung seperti blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error
 

 
 

 















Contoh penggunaannya:

$(window).bind("load",function(){
              $('#animasiloading').fadeOut(2000);
})

 Keterangan: Apabila window (page HTML yang sedang aktif) di bind() dengan event load
maka elemen ID animasiloading akan perlahan menghilang dalam 2 detik

 Source code lengkapnyanya bisa dilihat seperti gambar berikut:
 





























Dari source code diatas akan menghasilkan output dengan animasi loading ditengah window browser seperti ini
 




 

 

 

 

 

 

 





Download Source code nya disini.
Semoga bermanfaat yaa..

tags:
Share    




    KOMENTAR ANDA