Top Good Web Design

Web Designer

Create Your Own Page Load Progress Bar with Pace.js

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.



Resources You Need to Complete This Tutorial

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">
	<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">


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.

Leave a Reply