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.
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.
1 |
< script src = "/pace/pace.js" ></ script > |
2. Include a theme css of your choice in the document.
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:
06 |
maxProgressPerFrame: 20, |
08 |
startOnPageLoad: true , |
09 |
restartOnPushState: true , |
10 |
restartOnRequestAfter: 500, |
22 |
trackMethods: [ 'GET' ], |
23 |
trackWebSockets: true , |
4. API methods.
5. Event handlers.
02 |
Pace.on(event, handler, [context]); |
05 |
Pace.off(event, [handler]); |
08 |
Pace.once(event, handler, [context]); |
10 |
Pace.on(start, function (){ |
14 |
Pace.on(stop, function (){ |
18 |
Pace.on(restart, function (){ |
22 |
Pace.on(done, function (){ |
26 |
Pace.on(start, function (){ |
Changelog:
2021-03-03
- v1.2.4: Fix for certain Ajax calls not completing.
2020-11-16
2019-11-10
- Fixed: Breaks class properties of XmlHTTPRequest
2019-11-10