Pace.js, automatic page load progress bars

Pace.js, automatic page load progress bars

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, you can customize all these themes.

  • 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.

Here an exemple:

First, get the JavaScript. You can download the .min.js file from here. Choose a theme and add CSS

CSS File with the template « minimal »

For finish, wire everything together.

Make sure to add the tag to your CSS file and the tag to the JS file.

All the files wired together in your HTML file
Final project tree

That’s finish!!!! It’s easy and quickly made.

PACE.js detect page load and will be used to monitor the progress of AJAX calls.

Jean Bernard


Laisser un commentaire