Pace
A script that adds an automatic loading progress bar to any web page.
- Stars
- 15.6k
- Forks
- 1.8k
- Licence
- MIT
- Language
- CSS
- Last update
- 4 days ago
- Type
- Library
What it is
Pace is a small JavaScript file that shows a progress bar at the top of a web page while it loads. It watches ajax requests, page load state, and elements on the page to estimate progress, so you usually don't need to write any code for it to work. It is useful for letting visitors know that a page is still loading.
- Add a loading bar to a website by including the script and a theme stylesheet in the page head
- Show progress during ajax navigation so users see activity between page changes
- Track only selected ajax requests or ignore background requests using Pace.track or Pace.ignore
- Restart or stop the bar manually from your own code with Pace.restart or Pace.stop
Great for
- Website owners who want a loading indicator without writing custom code
- Front-end developers adding feedback to single-page or ajax-heavy pages
- Sites that use ajax navigation and want a progress bar on each page change
- Developers who want to pick from several ready-made progress bar styles
Not ideal for
- Projects that need a non-JavaScript loading indicator, since Pace depends on running in the browser
- Teams that need fine-grained control over progress values, because the README says it decides progress automatically
- Anyone needing a bar on a server-rendered page with no JavaScript, since it will not run without scripts
How to get it
- 1
Use it in the browser (or self-host)
Include the script in your page head
<script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>Include a theme stylesheet in your page head
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css"> - 2
Run it
- Add the script tag to your page head, as early as possible
- Add the theme stylesheet you want to your page head
- Load the page and watch the progress bar appear during loading
- 3
Get the most out of it
- Set window.paceOptions to turn individual sources like ajax or elements on or off
- Use the elements option with selectors to decide when loading is complete
- Use restartOnPushState or restartOnRequestAfter to control when the bar restarts
- Add a custom class name with the className option to adjust styling
- Use the Pace events (start, done, hide) to hook into the loading lifecycle
Downloads
Strengths
- Works automatically with no required configuration, per the README
- Includes several built-in themes and supports custom class names
- Has no dependencies and is described as about 4kb minified and gzipped
Trade-offs
- Automatic detection may not suit every website, and the README notes it has not been tested on every site
- Last push in the metadata is from February 2024, so maintenance activity may be limited
- Support is described for older browsers, but the README does not detail current browser testing
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| pace (this) | 15.6k | Library | beginner | 4 days ago | Website owners who want a loading indicator without writing custom code |
| nprogress | 26.3k | Library | beginner | 4.4 years ago | Web developers adding a loading indicator to single-page apps |
| rich | 57.7k | Library | beginner | 5 months ago | Python developers who write command-line scripts and want clearer output |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.