Create Your Own Page Load Progress Bar with Pace.js

Posted in Coding, JS & AJAX, Tutorials • Posted on 3 Comments

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

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.

50 Written ArticlesGoogle+

is a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. He spend most of his time practically every day, experimenting with HTML, CSS and Wordpress.

3 Comments
  • Maggie

    Monday, July 28th, 2014 02:06

    1

    Thanks for your sharing. Nice words.

    0
  • Phearum

    Monday, October 6th, 2014 10:17

    3

    Wonderful script code! now I use it in my website it really look clean. Thanks for sharing this interesting blog with us.

    0
  • Ghazni ali

    Monday, July 28th, 2014 08:38

    2

    hy i am a desighner and i am learning html and css, i am 19 years old.
    i like your pace,js so much i will use it in my nextwebsite thanks for that

    -2
  • Phearum

    Monday, October 6th, 2014 10:17

    3

    Wonderful script code! now I use it in my website it really look clean. Thanks for sharing this interesting blog with us.

    0
  • Ghazni ali

    Monday, July 28th, 2014 08:38

    2

    hy i am a desighner and i am learning html and css, i am 19 years old.
    i like your pace,js so much i will use it in my nextwebsite thanks for that

    -2
  • Maggie

    Monday, July 28th, 2014 02:06

    1

    Thanks for your sharing. Nice words.

    0

Comments are closed.

23.20.91.134 - unknown - unknown - US