Jumat, 25 Agustus 2017

Membuat Load Page Progrres Bar pada web dengan PACE JS


Saat kita masuk kedalam page baru atau biasanya saat kita login dan masuk ke halaman dashboard maka akan memerlukan waktu untuk meload agar tampil secara full, nah saat proses itu agar lebih bagus maka kita perlu menambahkan sebuah plugin Progress bar agar kelihatan menarik. banyak tutorial bagaimana cara menggunaka progress bar saat load page, namun di tutorial saya kali ini saya akang menggunakan plugin PACE , plugin ini sudah cukup umum digunakan pada web, dan penggunaanya pun cukup mudah, agar lebih Jelas berikut tutorialnya.

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.

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


Demo

Semoga Bermanfaat.
Previous Post
Next Post

0 komentar: