Create Beautiful Progress Bar For Website with Pace.js

By . in Web Design. Updated on .

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 javascript library 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.

15 Animated Progress Bars For Your Inspiration

15 Animated Progress Bars For Your Inspiration

Progress bars have one function that is, to inform the user about the progress of the task and... Read more

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:

<head>
  <script src="../pace.js"></script>
  <link href="../themes/pace-theme-corner-indicator.css" rel="stylesheet" />
</head>

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

progress bar demo

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.

<script>
paceOptions = {
  // Configuration goes here. Example:
  elements: false,
  restartOnPushState: false,
  restartOnRequestAfter: false
}
</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.

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

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail