Add a ‘YouTube Style’ loading bar to the top of your Divi Theme

Here’s how to add a ‘loading bar’ effect to the top of your page. This type of loading bar is used on sites like YouTube. We’re adding it to Divi in this example but its the same concept for any WordPress website. We’ve based the code in this tutorial on code found here.

Adding a loading bar to Divi

This modification requires editing two files; the header.php and the functions.php. If you haven’t already, create a copy of your current header.php and place it into a child theme. Then create a new file called functions.php, don’t copy your old one. The only thing you need in the functions.php (if you’re creating a new one) is an opening ‘php tag’. Which is just this:

<?php

Then you need to add the first part of the code to make the loading bar work. As shown here:

wp_enqueue_script('jquery');

If you already have a functions.php file in your child theme, then just add the line at the end (before the closing php tag, if you’re using one).

The next thing you need to do is open your child theme’s header.php and look for the closing header tag that should be on or around line 36. That looks like this:

</head>

The code that follows here goes underneath that closing tag but before the body tag, like this:

</head>
<!--ALL THE CODE GOES HERE SO MAKE A SPACE-->
<body <?php body_class(); ?>>

So now you know where you’re putting it, this is the code that adds your loading bar.

<!--Divi Load-->
<style>
#divi-load {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 0px;
height: 3px; /** Change the thickness of the bar here **/
background: #ffa500; /** Change the colour of the bar here **/
-moz-transition: width .7s;
-ms-transition: width .7s;
-o-transition: width .7s;
-webkit-transition: width .7s;
transition: width .7s ease-out; /** Change how long it takes for the bar to load here, be sure to mend the browser prefixes too **/
}
</style>
<script>
jQuery(document).ready(function() {
jQuery("body").append(jQuery("<div><dt/><dd/></div>").attr("id", "divi-load"));
jQuery("#divi-load").width("101%").delay(800).fadeOut(500, function() {
jQuery(this).remove();
});
});
</script>
<!--Divi Load End-->

You should now have a cool loading bar at the top of your page whenever you refresh or load a new page. If you give it a spin, let us know in the comments 🙂

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.