Automatic Page Load & Ajax Request Progress Bar - Pace.js

Pace.js is a lightweight (~4kb minified and gzipped) and standalone JavaScript library to create beautiful progress indicators for your page load and ajax request.

It automatically monitors AJAX requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again.

Pace.js currently comes with 15 themes and 10 color variables.

• Minimal
• Flash
• Barber Shop
• Mac OSX
• Fill Left
• Flat Top
• Big Counter
• Corner Indicator
• Bounce
• Loading Bar
• Center Atom
• Center Circle
• Center Atom
• Center Radar
• Center Simple
• 10 color variables: black, blue, green, orange, pink, purple, red, siver, white, and yellow.

See also:

• Google Like jQuery Slim Progress Bar Plugin - NProgress
• jQuery Youtube Like Ajax Progress Bar Plugin - ytLoad
• jQuery Slim Pre-Loading Bar Plugin - Loadie.js
• 10 Best Progress Bar (Linear) Components

Basic Usage:

1. Include Pace.js script in the HTML document.

<script src="/pace/pace.js"></script>

2. Include a theme css of your choice in the document.

<link href="/themes/COLOR/pace-theme-barber-shop.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-big-counter.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-bounce.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-center-atom.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-center-circle.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-center-radar.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-center-simple.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-corner-indicator.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-fill-left.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-flash.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-flat-top.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-loading-bar.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-mac-osx.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-material.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-minimal.css" rel="stylesheet" />

3. That's it. The library will automatically monitor AJAX requests and generate a progress indicator on page load. To customize the plugin, just override the default parameters displayed below:

paceOptions = {
  catchupTime: 100,
  initialRate: .03,
  minTime: 250,
  ghostTime: 100,
  maxProgressPerFrame: 20,
  easeFactor: 1.25,
  startOnPageLoad: true,
  restartOnPushState: true,
  restartOnRequestAfter: 500,
  target: 'body',
  elements: {
    checkInterval: 100,
    selectors: ['body']
  },
  eventLag: {
    minSamples: 10,
    sampleCount: 3,
    lagThreshold: 3
  },
  ajax: {
    trackMethods: ['GET'],
    trackWebSockets: true,
    ignoreURLs: []
  }
}

4. API methods.

// start the progress bar
Pace.start();

// restart the progress bar
Pace.restart();

// stop the progress bar
Pace.stop();

// explicitly track one or more requests
Pace.track();

// expliticly ignore one or more requests
Pace.ignore();

5. Event handlers.

// trigger the event
Pace.on(event, handler, [context]);

// unbind the event
Pace.off(event, [handler]);

// trigger the event only once
Pace.once(event, handler, [context]);

Pace.on(start, function(){
  // do something
});

Pace.on(stop, function(){
  // do something
});

Pace.on(restart, function(){
  // do something
});

Pace.on(done, function(){
  // do something
});

Pace.on(start, function(){
  // do something
});

Changelog:

2021-03-03

• v1.2.4: Fix for certain Ajax calls not completing.

2020-11-16

• v1.2.3

2019-11-10

• Fixed: Breaks class properties of XmlHTTPRequest

2019-11-10

• Updated the How-to doc

---

This awesome jQuery plugin is developed by CodeByZach. For more Advanced Usages, please check the demo page or visit the official website.