How to Create a JavaScript Progress Bar With Pace.js

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

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.

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