Automatic Page Load and Ajax Request Progress Bar with Pace.js

Pace.js is the simple javascript library which generates beautiful and automatic progress bar in your web application just like YouTube. Pace.js supports many themes and colors. Pace.js automatically detact your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress.

You don't need to add any extra line of code to use Pace.js library. To use Pace.js progressbar download the library from GitHub and include main Pace.js script file and any of one theme CSS file.

<link href="pace-master/themes/blue/pace-theme-flat-top.css" rel="stylesheet" />
<script src='pace-master/pace.min.js' type='text/javascript'></script>

You can also direct load Pace.js CDN instead of download library from Github and include. Here is the all Pace.js script file and all CSS theme files that you can use.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-center-radar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"></script>

You can also make some customization by adding 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
}

Or You can also put data-pace-options attribute on the script tag:

<script data-pace-options='{ "ajax": false }' src='pace.js'></script>

There are also events which you can run manually by calling function. For Example, You can also load progressbar by running bellow javascript.

Pace.restart();

Or stop by calling bellow script.

Pace.stop();

Here is the full documentation by which you can use options and events.

This way you can use progressbar without any code. I hope this tutorial will help you to enhance website performance.