Membuat Preloader / Loading Website

loadingbarpsd2

Salah satu elemen yang hampir selalu saya gunakan pada website yang saya buat adalah preloaders/loading website. Beberapa kegunaannya adalah sebagai berikut:

  1. Buat ngasih tau ke pengunjung kalo webnya lagi memproses data. Pernah saya main ke sebuah website, pas di klik 1 menu, gak ada efek apa2, cuma bengong doang, ya saya kira hang, ternyata lagi load konten. Kalo webnya kenceng sih gak masalah, tapi jadi masalah kalo yang di load cukup banyak.
  2. Agar web ditampilkan secara utuh. Kadang kala, website kita nge-loadnya gak barengan, entah header duluan, entah yang mana duluan. Yang paling parah adalah kalo css-nya di load belakangan, jadi tampilannya berantakan dulu dah websitenya.

Ada beberapa cara mudah untuk membuat loading ini, salah satunya dengan PACE.JS.

Pace.js

Pace.js saya pilih karena gak perlu konfigurasi, tinggal include css dan js, langsung jalan deh. Selain itu, saat ini sudah tersedia 14 Theme yang bisa kita gunakan untuk website kita, serta bisa kita ubah warnanya sesuai dengan tema website kita.

Pace.js Theme

 

Oiya, kalo kalian mau gunain loaders sendiri, kalian bisa pakai css berikut, tinggal diganti aja source image/gif-nya. 🙂
http://pastebin.com/2yw7DfzP