Progress bars in JavaScript with PaceJS

Monday, Sep 18th, 2018

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.

Pace.JS

Pace.JS is a lightweight(4kb) progress bar library intended to measure page loading on a website. This is helpful for preventing user abandonment of the website due to slow page loading. Pace.JS automatically monitors the current state of page loading using various sources of information. It can be used as a source javascript file or it can also be used as an AMD or CommonJS module. It has different themes for visually presenting progress. There are 10 colors available(black, blue, green, orange, pink, purple, red, silver, white, yellow) with respective css.

Progress Tracking

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.

Pace.JS has has 4 sources of information to measure page load progress. Whenever an Ajax request for a new page is made it automatically restarts the Pace.JS progress. Developers can use certain elements as an indicator to measure progress using css selectors. The 'document.readyState' property can be monitored to determine if page loading has completed. So when 'document.readyState' equals 'complete' then page has been loaded. The event loop lag monitor accounts for any unexpected lag in the JavaScript event loop.

Integration

Source Files: It can be integrated using the javascript source file and css stylesheet.
```
<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/blue/pace-theme-barber-shop.css" rel="stylesheet" />
</head>
```
While using source files for integration developers can declare a global variable object 'paceOptions' to configure the library.
```
paceOptions = {
  ajax: false, // disabled
  document: false, // disabled
  eventLag: false, // disabled
  elements: {
    selectors: ['.my-page']
  }
};
```
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:
```
<script data-pace-options='{ "ajax": false, "document": true, "eventLag": true }' src='pace.js'></script>
```

AMD or Browserify:

//Browserify
var pace = require('../plugins/pace');
pace.start({document: false, ajax: false, eventLag: true, elements: false});
//AMD
define(['pace'], function(pace){
  pace.start({document: false, ajax: false, eventLag: true, elements: false});
});

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/.

SOURCE

Pace.JS can be directly downloaded from the github page: https://github.com/HubSpot/pace.

DOCUMENTATION

The detailed documentation can be accessed at https://github.hubspot.com/pace/

DEMO

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.