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
- Download the library from GitHub.
- Include
pace.jsscript 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.
