Progress bars on websites are an intuitive mechanism to prevent user abandonment due to slow page loading or time consuming processes. It has a phycological significance in the user experience. It allows developers to alter the user's perception of time spent, provides sense of progress, completion and trustworthiness towards the processes. These aspects are discussed in detail pertaining to web forms on Spindogs blog: The psychology of progress bars.
AJAX: Detecting ajax requests in the current page.
Elements: Checking if certain elements have been loaded.
Document: Reading 'document.readyState' property.
Event Lag: This monitors the event loop lag(for more info see event loop) in the browser.
While using source files for integration developers can declare a global variable object 'paceOptions' to configure the library.
Additionally developers can add property 'extraSources' to 'paceOptions' with the value set as array of objects. Each object should have 'progress' property or a property 'elements' which itself will be array of objects containing 'progress' properties. All values for progress in 'extraSources' will automatically be scaled to show final progress value.
Developers can pass the configuration options also from the html tag itself via this syntax:
AMD or Browserify:
Developers can use AMD or Browserify syntax to use this library. The configuration object can be passed in '.start()' method as arguments.
Wordpress: This library is available as a Wordpress plugin: https://wordpress.org/plugins/pace/.
Pace.JS can be directly downloaded from the github page: https://github.com/HubSpot/pace.
The detailed documentation can be accessed at https://github.hubspot.com/pace/
This demo includes the center-radar theme in red color. Please use the cdn carefully as it does not seem to be upto date with the actual repository. So for best code quality download library from github. To run the demo just click 'run' in jsfiddle.