Pace – Automatic page load progress bar

Pace - Automatic page load progress bar

If you are a web designer, it is almost certainly that you have built a single-page website which at some point at the process became a very huge one, especially if you are using parallax effect and some jQuery plugins.

Even if you optimize such page, it is likely that it becomes a massive one. Having a heavy website can be a problem in terms of loading times and users’ patience. In such situations, the best thing to do to tackle this issue is to add a customized loading screen which can decrease the frustration of the users while your page is loading.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

There are many options to add a custom loading screen and many tutorials that will teach you how to do that. But I want to introduce you to a great jQuery plugin that has many options which will help you add a custom loading progress bar.

Pace.js is a tiny plugin (4kb minified and gzipped) that will allow you to add a loading feature to your website. Pace also has lots of custom CSS themes to choose from and their size vary between 0.5 and 4kb.

Related post:  Mobile-first Pull-down Мenu with jQuery

Adding Pace.js is quite easy, just link the js file and the CSS theme, and you should have a beautiful progress indicator. You do not need to hook anything as the progress is detected automatically.

Some examples of the loading themes


How to use Pace.js

Add the files you need:

<script src="/pace/pace.js"></script> 
<link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" /> 

Choose a theme from here. And you should be having a nice loading solution. For the configuration follow the about link below.

About Pace.js Download

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.