PACE – Automatic page load progress bar which monitors AJAX requests, Event loop lag and documents ready state.
Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.
No need to hook into any of your code, progress is detected automatically.
Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!
If you use AMD or Browserify, require in pace.js and call pace.start() as early in the loading process as is possible.
Example
<head>
<script src="/pace/pace.js"></script>
<link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>Configuration
Pace is fully automatic, no configuration is necessary to get started.
If you would like to make some tweaks, here’s how:
You can set window.paceOptions before bringing in the file:
paceOptions = {
// Disable the 'elements' source
elements: false,
// Only show the progress on regular and ajax-y page navigation,
// not every request
restartOnRequestAfter: false
}You can also put options on the script tag:
<script data-pace-options='{ "ajax": false }' src='pace.js'></script>If you’re using AMD or Browserify, you can pass your options to start:
define(['pace'], function(pace){
pace.start({
document: false
});
});
Website: http://github.hubspot.com/pace/docs/welcome/
Thanks for reading,
Web Editor