pace

Pace is a small library that adds an automatic progress bar to any website. You include the pace.js script and a theme CSS file in your page, and it starts working on its own, without any configuration. As the page loads or as the user navigates around, Pace watches several signals to decide how far along the loading is and animates a progress bar accordingly.

The signals Pace tracks come from four built-in collectors: Ajax requests (data your page is fetching in the background), Elements (waiting for certain parts of the page to appear, identified by CSS selectors you list), Document (the browser's normal readiness signal), and Event Lag (whether JavaScript is keeping the browser busy). Each collector can be enabled, disabled, or tuned through a paceOptions object set on the window or directly on the script tag. You can also plug in your own sources of progress information through extraSources. Pace exposes a small API — Pace.start, Pace.restart, Pace.stop, Pace.track, and Pace.ignore — along with events like start, done, hide, and restart that you can listen to.

By default, Pace also restarts the bar whenever the browser navigates without a full page reload (a pushState event), which is what most single-page apps do. It can be told to ignore certain URLs by substring or regular expression, or to only track requests longer than a chosen duration. Pace has no dependencies and ships in around 4kb minified and gzipped, with themes adding between half a kilobyte and four kilobytes more. The full README is longer than what was provided.