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

Free Download Automatic Page Load & Ajax Request Progress Bar – Pace.js

By Posted on

This time I will share jQuery Plugin and tutorial about Automatic Page Load & Ajax Request Progress Bar – Pace.js, hope it will help you in programming stack.

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

Demo Download

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.

Basic Usage:

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

view source
1 <script src="/pace/pace.js"></script>

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

view source
01 <link href="/themes/COLOR/pace-theme-barber-shop.css" rel="stylesheet" />
02 <link href="/themes/COLOR/pace-theme-big-counter.css" rel="stylesheet" />
03 <link href="/themes/COLOR/pace-theme-bounce.css" rel="stylesheet" />
04 <link href="/themes/COLOR/pace-theme-center-atom.css" rel="stylesheet" />
05 <link href="/themes/COLOR/pace-theme-center-circle.css" rel="stylesheet" />
06 <link href="/themes/COLOR/pace-theme-center-radar.css" rel="stylesheet" />
07 <link href="/themes/COLOR/pace-theme-center-simple.css" rel="stylesheet" />
08 <link href="/themes/COLOR/pace-theme-corner-indicator.css" rel="stylesheet" />
09 <link href="/themes/COLOR/pace-theme-fill-left.css" rel="stylesheet" />
10 <link href="/themes/COLOR/pace-theme-flash.css" rel="stylesheet" />
11 <link href="/themes/COLOR/pace-theme-flat-top.css" rel="stylesheet" />
12 <link href="/themes/COLOR/pace-theme-loading-bar.css" rel="stylesheet" />
13 <link href="/themes/COLOR/pace-theme-mac-osx.css" rel="stylesheet" />
14 <link href="/themes/COLOR/pace-theme-material.css" rel="stylesheet" />
15 <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:

view source
01 paceOptions = {
02   catchupTime: 100,
03   initialRate: .03,
04   minTime: 250,
05   ghostTime: 100,
06   maxProgressPerFrame: 20,
07   easeFactor: 1.25,
08   startOnPageLoad: true,
09   restartOnPushState: true,
10   restartOnRequestAfter: 500,
11   target: 'body',
12   elements: {
13     checkInterval: 100,
14     selectors: ['body']
15   },
16   eventLag: {
17     minSamples: 10,
18     sampleCount: 3,
19     lagThreshold: 3
20   },
21   ajax: {
22     trackMethods: ['GET'],
23     trackWebSockets: true,
24     ignoreURLs: []
25   }
26 }

4. API methods.

view source
01 // start the progress bar
02 Pace.start();
03  
04 // restart the progress bar
05 Pace.restart();
06  
07 // stop the progress bar
08 Pace.stop();
09  
10 // explicitly track one or more requests
11 Pace.track();
12  
13 // expliticly ignore one or more requests
14 Pace.ignore();

5. Event handlers.

view source
01 // trigger the event
02 Pace.on(event, handler, [context]);
03  
04 // unbind the event
05 Pace.off(event, [handler]);
06  
07 // trigger the event only once
08 Pace.once(event, handler, [context]);
09  
10 Pace.on(start, function(){
11   // do something
12 });
13  
14 Pace.on(stop, function(){
15   // do something
16 });
17  
18 Pace.on(restart, function(){
19   // do something
20 });
21  
22 Pace.on(done, function(){
23   // do something
24 });
25  
26 Pace.on(start, function(){
27   // do something
28 });

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

Related posts: