Author: Hussain Mir Ali

I am interested in web and mobile technologies.

If you have any questions or feedback then message me at

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



Pace.JS can be directly downloaded from the github page:


The detailed documentation can be accessed at


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.