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

Automatic Page Load & Ajax Request Progress Bar - Pace.js
File Size: 53.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Pace.js is a lightweight (~4kb minified and gzipped) javascript library to create beautiful progress indicators for your page load and ajax request. It 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.

Pace.js currently comes with 9 themes (templates):

  • Minimal
  • Flash
  • Barber Shop
  • Mac OSX
  • Fill Left
  • Flat Top
  • Big Counter
  • Corner Indicator
  • Bounce
  • You can also create your own themes to fit for your own style

See also:

Basic Usage:

1. Include Pace.js script in the head section of your page

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

2. Choose and include a theme css in your document

<link href="/pace/themes/pace-theme-minimal.css" rel="stylesheet" />

3. Settings

paceOptions = {
  ajax: false, // Monitors all ajax requests on the page
  document: false, // Checks for the existance of specific elements on the page
  eventLag: false, // Checks the document readyState
  elements: {
    selectors: ['.my-page'] // Checks for event loop lag signaling that javascript is being executed
  }
};

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