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.
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.
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:
<head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" /> </head>
Choose a theme from here. And you should be having a nice loading solution. For the configuration follow the about link below.