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 🙂
Wow, i like this – but, does it have any usable function? Or is it just for the “look” ?
This is really cool! But is there a way to base the size off the actual page load time?
For example, when the page is 50% loaded the bar could be 50% across?
At the moment it is based upon just an animation time, so someone with slow internet will see the bar get to 100% but then still have to wait some time for the page to actually finish loading.
Thanks!
Yeah, this is only for the view. Not a function, I guess.
PS: I’ve added the CSS at my “Custom CSS”, I guess thats OK? … It worked in any case, I really wonder why you means this should be places in the header.php? 🙂
Awnyways, great, cool thing!
Looks awesome Stephen thanks!
Hi SJ,
thanks for this gem. i would be interessted on change the width of the loading bar for “boxed layout” websites -> so that the bar is only inside the boxed frame.
It should be a case of setting the width, margins etc to the same as that of your container. (80% I think?)
The code works great, however, no matter what I do I can’t get it to stop loading the ffa500 orange Hex Color. I have changed the hex color as you suggested and I even tried putting !important and nothing happens… the orange/yellow color still shows as the bar (background) color.
I did notice that when I was logged into wordpress and refreshed/previewed the site the color changes to my desired color would work and reflect accordingly, however, when I would log out of wordpress and refresh the page it goes back to the orange/yellow color.
I have included your code as per your instructions in functions.php and header.php via a child theme and Dreamweaver ftp
When someone writes an article he/she maintains the image of a user in his/her mind that how a user can understand it. Thus that’s why this article is outstdanding. Thanks!|
W4ARnl Looking forward to reading more. Great article post. Keep writing.
Done on my band’s website. One more fun stuff added !
Thanks !
Works great!