explaingit

codebyzach/pace

★ 15,616CSSAudience · developerComplexity · 2/5Setup · easy

TLDR

A zero-configuration JavaScript library that automatically adds a loading progress bar to any website, tracking page loads, background data requests, and JavaScript busyness, include one script and it just works.

Mindmap

mindmap
  root((Pace))
    What It Does
      Auto progress bar
      No configuration
      Page load tracking
    Built-in Trackers
      AJAX requests
      DOM elements
      Document readiness
      Event lag
    Customization
      paceOptions config
      Theme CSS files
      Custom sources
    Use Cases
      Any website
      Single-page apps
      AJAX-heavy pages
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a visual loading progress bar to any website with a single script tag and a CSS theme file, no configuration needed.

USE CASE 2

Show users that the page is still working during background data fetches by automatically tracking AJAX requests.

USE CASE 3

Customize and fine-tune the progress bar behavior for a single-page app by enabling only the AJAX tracker and restarting on browser navigation events.

Tech stack

JavaScriptCSS

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

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.

Copy-paste prompts

Prompt 1
Add Pace.js to my plain HTML page so it shows a loading bar during page load and hides automatically once all AJAX calls finish, include the minimal theme CSS.
Prompt 2
Configure Pace.js to only show the progress bar when a request takes longer than 500ms and to ignore all requests to the /api/health endpoint.
Prompt 3
Write the paceOptions config to disable the document and event-lag trackers and only show the bar for AJAX requests in a single-page React app that uses react-router.
Prompt 4
How do I use the Pace.track API to include a custom async operation in the progress calculation alongside the built-in AJAX tracker?
Open on GitHub → Explain another repo

← codebyzach on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.