Softnami
Author: Hussain Mir Ali

I am interested in web and mobile technologies.

If you any questions or feedback then message me at devtips@softnami.com.

Announcements
Ads

Call predictor: AI based call prediction

Download

2020

Feb
Jan

2019

Dec
Nov
Jul
May
Mar
Jan

2018

Nov
Sep
Jul
Jun
Apr
Feb
Jan

2017

Dec
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Jan

2016

Dec
Oct
Sep
Aug
Jul

Progress bars in JavaScript with PaceJS

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

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

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.