Add Your Own Page Load Progress Bar With Pace.Js


For some users, a progress bar can be a very useful thing. It informs them of how much closer they are to completing tasks. Normally, this is used to give a more user-friendly experience. When you open a webpage on your favourite browser, there is already a default progress bar in the browser tab to see if the page is completely loaded.

With Pace.js, you can now incorporate the page load progress bar into your own page.

Pace.js is a jQuery plugin to create a beautiful page load progress bar in a website. The progress is established automatically by inspecting ajax requests, document ready state, event loop lag (showing that javascript is being executed) and the existence of specific elements on a page.

When an ajax navigation or a pushState event takes place, the progress bar will also be restarted again.

Getting Started

Pace.js is very easy to implement. It can be used even without having jQuery library in your site. You just need to incorporate pace.js and a CSS theme of your choice as early as possible into your document:

  1. <head>
  2.   <script src=”../pace.js”></script>
  3.   <link href=”../themes/pace-theme-corner-indicator.css” rel=”stylesheet” />
  4. </head>

That’s it! You’re done and your site now has a beautiful page loading progress bar.

Configuration

Substance wise, there’s no need for additional configuration as Pace.js comes with full automation. But if the default setting doesn’t meet your needs, you can use your own configuration as well.

To customize further, there are two simple methods you can choose. First, by including configuration inside window.paceOption like the following.

  1. <script>
  2. paceOptions = {
  3.   // Configuration goes here. Example:
  4.   elements: false,
  5.   restartOnPushState: false,
  6.   restartOnRequestAfter: false
  7. }
  8. </script>

A second method is where you can easily add data-pace-options inside a script tag then define the configuration and call the pace.js resource like so.

  1. <script data-pace-options='{ “ajax”: false }’ src=’pace.js’></script>

You can find the complete list of available configurations you can use in the source page.

Final Thought

This plugin comes with a bunch of ready-to-use themes. To see the full list and demo of the themes, you can head on over to the plugin site. If those themes don’t suit you, you can easily create your own. With the help of a plugin like Pace.js, now you don’t have to worry about difficulties in implementing a loading page progress bar into your site.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s