CodeByZach/pace: Automatically add a progress bar to your site.

PACE ====

Demo

Include pace.js and the theme css of your choice on your page (as early as possible), and you're done!

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

If you use AMD or Browserify, require pace.js and call Pace.start() as early in the loading process as possible.

Example -------

<head>
  <script src="https://cdn.jsdelivr.net/npm/pace-js@1/pace.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js@1/pace-theme-default.min.css">
</head>

Configuration -------------

Pace is fully automatic, no configuration is necessary to get started.

If you would like to make some tweaks, here's how:

You can set window.paceOptions before bringing in the file:

paceOptions = {
  // Disable the 'elements' source
  elements: false,
// Only show the progress on regular and ajax-y page navigation,
  // not every request
  restartOnRequestAfter: false
}

You can also put options on the script tag (the value must be valid JSON):

<script data-pace-options='{ "ajax": false }' src="https://cdn.jsdelivr.net/npm/pace-js@1/pace.min.js"></script>

Pace reads its options once, when pace.js loads, so set them before including it. Assigning Pace.options afterwards has no effect.

If you load pace with a bundler or module loader (AMD or CommonJS), it doesn't start on its own: set window.paceOptions before pace loads, then call Pace.start(). import statements run before the rest of a file, so put the options in their own file and import it first:

// pace-options.js
window.paceOptions = {
  document: false
};

// your entry file
import './pace-options.js';
import Pace from 'pace-js';
Pace.start();

With RequireJS, set window.paceOptions in a Chat with me