1stwebdesigner

Create Your Own Page Load Progress Bar with Pace.js

Posted: 13 Jul 2014 06:00 AM PDT

Progress bar informs the user about the waiting time for a page or specific task to load. Usually when the server loads so slow, the user waits and waits for a long time without having any idea how long it will finish loading. A progress bar gives user-friendly experience, thus, adds more value to the website.

Although you can create a page load progress bar with CSS3 animation, it is not dynamic at all. Good thing there is this built-in JavaScript plugin called Progess Automatically Certain to Entertain (Pace.js), a lightweight JavaScript library that consists of a cool and amazing progress bar indicator for your page load and Ajax navigation.

What’s great with Pace.js:

You can automatically load a progress bar within any web page you have in your website.
Pace.js is executed using a document-read state, event loop and Ajax requests within a specific element of the web pages.
It comes with 14 built-in themes (at the time of this writing) that you can choose from.
Progress is detected automatically.

In today’s tutorial, I am going to show you how to use this amazing plugin to load a progress bar on your site.

pace

Demo

Resources You Need to Complete This Tutorial

Any background image
Pace.js

It's so easy! Start Here!

Pace.js is very easy to implement. You just need to include Pace.js and the theme CSS of your choice on your Head section and you’re done. No need to add a jQuery library to make it work!

  <!DOCTYPE html>  <html lang="en">  <head>  	<meta charset="utf-8">  	<title>Create your own page load progress bar with Pace.js</title>  	<script src="js/pace.js"></script>  	<link href="css/pace-theme-corner-indicator.css" rel="stylesheet">  </head>

Configuration

Although Pace.js is fully automatic; no configuration needed to make it work. You can do some tweaks on it.

Two Ways to Do It:

1. Set window.paceOptions before bringing in the file:

  paceOptions = {    // Disable the 'elements' source    elements: false,      // Only show the progress on regular and ajax-y page navigation,    // not every request    restartOnRequestAfter: false  }

2. Put options on the script tag:

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

Changing the Color of the Loading Bar

You can also change the colors of the themes. There are two ways to do this:

1. Customize colors thru the Pace.js themes page

2. By going directly to the CSS file and changing the background colors and border colors.

Wrapping Up

There you have it! It's so easy isn't it?

Pace.js is a great JavaScript plugin and comes with a lot of themes. There are also some other jQuery plugins like ProBars: jQuery Animated Progress Bars and Progress.js .

But for me, Pace.js is the best one since it's a plug and play plugin; no configuration needed. Let me know about your thoughts regarding this plugin on the comment section.