pace.js– Loading progress bar plug-in

Here is a brief introduction to this plugin pace.js.

By introducing Pace.js to the page, the page automatically monitors your requests (including AJAX requests), lags in the event loop, and logs the status of the load and the progress of the page. This plug-in compatibility is very good, can be compatible with all the major plug-ins above IE8, and its strength is that you can also introduce the loading progress bar theme style, you can choose any color and a variety of animation effects (such as simple, Flash, MAC OSX, left padding, top fill, counter and bounce and so on animation effect) , if you are good at modifying CSS animations, you can animate an infinite number of possibilities, adding personalized features to your site!

Call Method:

Introduce Pace.js and theme files:

< Head >  <  src= "/pace/pace.js"></script>  < href = " /pace/themes/pace-theme-barber-shop.css"  rel= "   Stylesheet "/></head>

Custom configuration:

The pace.js automatically loads into the page, does not need to be hooked up to any code, and automatically detects progress. If you want to make some adjustments, you can window.paceOptions set the configuration from the definition:

Paceoptions = {  //  Disable the ' elements ' source  false,   // Only show the progress on regular and Ajax-y page navigation,  // Not every request  false }

You can also put custom settings script in a tag, for example:

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

If you use AMD or Browserify to load a module, you can set it up in this way (for example: start ):

function (PACE) {  Pace.start ({    false  });});

Using the API:

Pace.js Public API list:

• Pace.start: Start showing the progress bar, if you are not using AMD or Browserify to load the module, this will be done by default.
• Pace.restart: The progress bar reloads and displays.
• pace.stop: Hides the progress bar and stops loading.
• Pace.track: Monitors one or more request tasks.
• Pace.ignore: Ignores one or more request tasks.

Basically the way to use these, there are other methods of use, you go to the official website to see more detailed introduction. Hope this plugin can help everyone!

More detailed information can be found on the official website: http://github.hubspot.com/pace/

pace.js– Loading progress bar plug-in