Cara Membuat Load Page Progrres Bar Menarik Dengan PACE.JS

Ketika kita masuk kedalam sebuah page baru atau biasanya saat kita login dan masuk ke halaman dashboard, maka akan memerlukan waktu untuk meload agar tampil secara full, nah disaat proses sedang berlangsung dan agar lebih bagus lagi, maka kita perlu menambahkan sebuah plugin Progress bar agar terlihat menarik. banyak sekali tutorial tentang bagaimana cara menggunakan progress bar saat meload page, namun pada tutorial saya kali ini saya akan menggunakan sebuah plugin yang bernama PACE, plugin ini sudah cukup umum digunakan pada kalangan web, dan penggunaanya pun cukup mudah, agar lebih Jelas mari kita ikuti tutorialnya.

Cara Membuat Load Page Progrres Bar Dengan PACE.JS

1. Kunjungi plugin PACE.js Disini.

2. Download PACE.JS atau Disini.

3. Pilih Tema dan Warna Tema sesuai selera anda lalu download ditutorial ini saya pake Flash.

4. Buat sebuah file sebagai contoh, lalu sisipkan PACE.js beserta tema nya

<!DOCTYPE html>

<html>
<head>
<title>Page Loading</title>
   <link rel="stylesheet" href="dataurl.css" />
   <script src="pace.min.js"></script>
</head>
<body>
   <h1>Ini Contoh Page Loading dengan PACE.JS</h1>
   <p>Hello World.</p>
</body>
</html>

5. Jika sudah save lalu jalan kan jika berhasil maka progrees bar akan tampil diatas seperti gambar dibawah ini.

Baca Juga

Anda bisa mengimplementasikan ini untuk project anda biasanya digunakan saat login menuju dashboard namun anda bisa menkreasikan sendiri, Semoga Bermanfaat.