Hallo teman-teman,apa kabar ? Kali ini kita akan mempelajari cara membuat preloader sederhana. Apa itu preloader ?

Preloader adalah sebagai penanda bahwa web sedang meload isi kontenya hingga selesai,baru preloader tersebut akan hilang dengan sendirinya. Preloader ini sangat membantu user untuk mengetahui bahwa website sedang dalam proses tampilannya terlebih dahulu baru disajikan ke user.

Langsung saja ya teman-teman kita mulai dengan mencari gambar preloader berformat .gif. Teman-teman bisa cari di link http://preloaders.net/.

1

Setelah memilih gambar gifnya lalu simpan. Setelah itu teman-teman buat file htmlnya seperti ini.

index.html

3

Di dalam file html ini teman-teman buat satu div dengan id preloader. Pada div ini kita akan menampilkan gambar gif yang telah kita download tadi. Lalu dibawah div preloader adalah isi konten yg akan muncul setelah proses preloader selesai. Kemudian teman-teman juga tambahkan script jquery seperti gambar kotak merah diatas. Script itu akan membuat efek fadeout secara slow setelah selesai proses loadnya. Jangan lupa sebelum memberikan script diatas teman-teman harus berikan script jquerynya seperti contoh digambar.

Dan file untuk css seperti ini. Lalu link-an dengan htmlnya.

style.css

2

Coba teman-teman buka dibrowser, jika berhasil maka akan muncul tampilan seperti ini.

Sebelum preload

4

Sesudah preload

5

Sekian pembahasan cara membuat preloader sederhana. Semoga bermanfaat.