Automatic page load progress bar with Pace.js

The pace.js is an automatic page load progress bar. You don’t need to write any code to initialize the script during page load.

It is easy to implement and not dependent on any other external JavaScript libraries.

You can also use this with AJAX request to show the progress bar when the request is been triggered.

Several themes with different-different colors are available that you can use.

---

Contents

1. Download and Include
2. Themes
3. With AJAX
4. Conclusion

---

1. Download and Include

• Download the library from GitHub.
• Include pace.js script and need to include a theme CSS file.

Here, I include one of the themes CSS file.

<link href="pace-master/themes/blue/pace-theme-flat-top.css" rel="stylesheet" />
<script src='pace-master/pace.min.js' type='text/javascript'></script>

That’s it.

---

2. Themes

Here, are some themes in various colors –

• Barber shop
• Big counter
• Bounce
• Center atom
• Fill Left
• Flat Top
• Loading bar
• Mac osx
• Material
• etc.

---

3. With AJAX

This doesn’t get automatically activated when any AJAX request is triggered.

Example

Display the progress bar whenever the AJAX request is been send.

$(document).ajaxStart(function() {
 Pace.restart();
});

Demo

Enter text in username input box and change focus to another element.

---

4. Conclusion

You can use this to improve user-interface by showing the progress bar while on page load. It comes with several pre-made themes that you can use.

If you like to use it with AJAX then you need to call Pace.restart() method.

If you found this tutorial helpful then don't forget to share.