Mempercantik Halaman Website Dengan Efek Loading
Mungkin diatara temen – temen pengujung dokumenary.net ada yang belum tau gimana sih caranya bikin loading yang bagus pada halaman website kita, disini saya akan berbagi cara sederhana yang bisa temen – temen gunakan untuk membuat hal tersebut, caranya mudah sekali tapi hasilnya huummm syupperr…
Temen – temen bisa mencobanya terlebih dahulu di SINI.
Gimana, sudah dilihat? bagus ya… Loading ini dapat memberikan informasi kepengujung sudah berapa persen halaman terload, saya rasa sangat perlu digunakan pada website yang memiliki konten – konten yang berat seperti video, gambar yang berukuran besar dan banyak. Dan efek loading tersebut akan kita buat dengan javascript libaray yang sudah
tersedia yang bernama PACE.
Berikut cara mendapatkan resource pace :
1. Kunjungi website resminya di http://github.hubspot.com/pace/docs/welcome/
2. Download file pace.min.js di sini https://raw.github.com/HubSpot/pace/v1.0.0/pace.min.js
3. Atur warna jika ingin warna yang berbeda
4. Pilih theme yang kamu suka dan download
Cara memasangnya kita tinggal panggil pace.min.js dan file css nya dan taruh sebelum tag </head> seperti berikut :
<head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" /> </head>
Sekarang coba anda refresh, taraaaaa…
Selain cara diatas, kita juga dapat menginstall pace melalui eager
Silahkan temen – temen pencet tuh link diatas, maka akan diarahkan ke website eager, disana kita bisa tinggal memeberikan alamat website yang akan menggunakan pace, setelah itu
akan diberikan link js yang ditaruh juga sebelum tag </head>.
Keuntungan pake eager adalah, kita tidak perlu upload file resource pace.min.js dan css nya ke hosting kita, tentunya sangat berguna sekali bagi pengguna blogspot dan sejenisnya ya.
Selain itu pada eager juga terdapat App Store, jadi kita bisa menginstall aplikasi lainnya semacam Share, Contact Form, Google Map dan lain-lain yang secara otomatis akan tampil pada alamat website yang telah diatur.
Ya sekian tulisan kali ini, semoga dapat memberikan pencerahan buat temen – temen ya, aamin…
Like facebook dokumenary atau subscribe ya, biar selalu dapat info-info terbaru.
Terimakasih
Category: Javascript
Comments