Cara Menampilkan Loading Bar Ketika Membuka Suatu Halaman
Pada saat membuka atau mengakses suatu halaman dalam sebuah website, terkadang kita tidak mengetahui apakah halaman yang dibuka sudah selesai tampil semua atau belum. Bagi orang awam, biasanya mereka tidak tahu kalau sebuah halaman tersebut sudah selesai atau masih berjalan, tapi bagi orang yang sudah biasa maka salah 1 cara untuk mengetahuinya adalah melihat icon atau gambar refresh kecil yang ada di browser telah tampil atau masih menampilkan icon silang atau X.
Seorang web developer dapat memberikan tanda atau indikator tersebut dengan cara yang lebih keren dan kekinian dengan menambahkan loading bar pada setiap halaman yang disediakan. Pada tutorial kali ini saya akan membagikan caranya dengan menggunakan bantuan dari PACE (Automatic Page Load Progress Bar). Anda dapat langsung melihat hasil jadinya di halaman website resminya di https://github.hubspot.com/pace/docs/welcome/. PACE memberikan berbagai macam opsi atau pilihan dalam menampilkan page load progress bar, seperti minimal, flash, barber, mac OSX dan lain sebagainya.
Bagaimana Cara Menggunakannya?
Silahkan ikuti langkah-langkahnya berikut ini:
- Download dulu file-file yang diperlukan: pertama, kedua
- Setelah itu buatlah 1 folder project baru dalam folder htdocs dengan nama pageloadingbar atau silahkan beri nama sendiri sesuai dengan keingininan Anda
- Copas file pertama dan kedua pada poin 1 ke dalam folder project yang telah dibuat
- Buatlah file baru dengan nama index.php dalam folder project yang telah Anda buat dengan isi seperti dibawah ini:
- Kemudian jalankan dengan browser Anda dengan URL localhost/namafolderproject
- Atau Anda bisa mendownload file yang telah jadi disini
CATATAN
- Pastikan semua asset file seperti jquery dan plugin PACE telah berada di dalam direktori yang sama pada saat pemanggilan di tag <head>
- Posisi file jquery harus berada diatas file js PACE karena kalau dibawah tidak akan dapat berjalan
Silahkan ajukan pertanyaan di kolom komentar apabila menemukan problem saat Anda mencobanya dan semoga bermanfaat.
Bagikan ke Yang Lain
Diskusi
Belum ada pertanyaan pada artikel ini
Tulis Pertanyaan
Ada pertanyaan? Silahkan tulis pada form dibawah ini
Silahkan login dahulu untuk dapat berkomentar, klik disini.Artikel yang Lain
Cara Mudah Install Composer di OS Windows
Composer adalah sebuah project open source yang dimotori oleh Nils Adermann dan Jordi Boggiano.…
SelengkapnyaMengetahui Kecepatan dan Pemakaian Internet dengan…
Software ini dapat dibilang sebagai pemberi informasi kepada kita tentang seberapa tinggi kecepatan…
SelengkapnyaMengatur Default Routes di Codeigniter pada Sub Folder
Routes merupakan suatu fitur yang disediakan oleh Codeigniter untuk mempermudah dalam mengelola URL…
SelengkapnyaCara Kirim Email dari Localhost dengan Codeigniter…
Sebelumnya kita telah belajar tentang Cara Kirim Email dari Localhost dengan PHP Native dan PHPMailer,…
Selengkapnya8 Fitur Utama di Elementor Pro
Jika Anda ingin mendesain situs web atau membuat halaman arahan yang menakjubkan, Elementor Pro adalah…
SelengkapnyaCara Mudah Membuat Domain Website http Menjadi https…
Pertama-tama, kita harus tahu dulu apa itu http dan https. Mengutip dari halaman wikipedia tentang…
Selengkapnya