Have you ever wanted to add some loading bar to your Divi site? This is a pretty easy thing to do, takes only a couple of steps and is a neat feature that you should add to all your Divi Theme site (or maybe even your Extra Theme sites too).

In this example I am going to show you how to add the YouTube’s loading bar, but I’ll also show you how to add other styles of loading bar to your site.

You can see what we’ll implement by refreshing this page. A red loading bar should run from the top left side of the page to the top right. 

Let’s start!

01. First of all

The file is called pace.js and it is an open source project created by the HubSpot team.

Download the file in the GitHub here. Click to “Clone or Download” > “Download ZIP”

Add YouTube’s loading bar to Divi Theme 1

02. Second step

This is the important part and may lead to misunderstanding of how to get this really to work on your Divi site.

Search for the file called “pace.min.js” and upload to a folder inside your WordPress site.

I recommend putting all your JS files inside /wp-content/uploads/js/js-file-here.min.js

03. Third step

Go to “Theme Options” > “Integration” > “Add code to the < head > of your blog” and place the following code:

<script type="text/javascript" src="https://your-domain-name.com/wp-content/uploads/js/pace.min.js"></script>

Do not forget to change https://your-domain-name.com to your domain name – or the place where the pace.js file is stored.

04. Fourth step

Go to “Theme Options” > “Custom CSS” and place the following code:

/* Loading bar */
 .pace {
 -webkit-pointer-events: none;
 pointer-events: none;

-webkit-user-select: none;
 -moz-user-select: none;
 user-select: none;
 }

.pace-inactive {
 display: none;
 }

.pace .pace-progress {
 background: #e74c3c !important; /*Change your loading bar color here */
 position: fixed;
 z-index: 9999999;
 top: 0;
 right: 100%;
 width: 100%;
 height: 3px; /*Change your loading bar height here */
 }

It is good to have a plugin to manage all your custom CSS and JS in your WordPress site. I really recommend the Simple Custom CSS and JS plugin. You can access the plugin page clicking this link.

05. That’s it!

Ow yeah! Now you should be seeing the YouTube’s loading bar in the top of your site.

It didn’t take too much time and I bet you really like to have it. Am I right?

It is a good habit to always give feedback to your site users about what is going on. Use this JS trick to show them how long it takes until the page is fully loaded. It is a neat feature to all your WordPress and Divi Theme sites.

Bonus tip

There are 14 more loading bar templates for you to try their different designs in your site.

Link: Loading bar templates

Browse over all the templates and click “Download” to view the CSS code needed to activate it.

Then, change the CSS style following the 04 step. That’s it.

Conclusion

Hey! I hope you manage to follow through all this tutorial and manage to apply to your Divi Theme site or WordPress site. Do you have any questions? Ask in the comments bellow and I’ll glad answer as soon as I can.

I’ll be very happy if I manage to help you.

See ya!