Displaying page loading animation is an easy way to make your Divi websites unique and add a bit of class.

The technique described below will display the animation on an opaque layer that lets the visitor see the page loading. Once fully loaded, the animation is hidden and the page become interactive.

Step 1 – Create and Upload Loading Animation

The first step is to create the animation you will show while your pages are loading.

There are several types of animations to choose. My experience is that animated SVG files give the best results. That’s what I will be showing in this tutorial.

I recommend visiting loading.io. They offer a wide range of free and low-cost premium animated loading icons.

Once you have created and saved your animation, upload it to your website. I saved mine in a subdirectory named “images” in my child theme subdirectory. If you save yours in a different directory, be sure to modify the url in the CSS code.

Step 2 – Add jQuery Code

The jQuery code below does several things:

  • adds a div to display the animation
  • hides the div when the page is fully loaded
  • displays the div when a link is clicked

Here is the jQuery code:

(function($){

	// *** Page Load Animation ***
	var  isloading = false;
	// Append a div for the load icon
	$("#page-container").append("<div class='loader'></div>" );
	// When the page is loading show the icon
	$(window).load(function() {
		$(".loader").fadeOut("slow");
		isloading = false;
	})
	// When a link is clicked, display the loader unless it is one of the links listed
	$("a").not(".menu-item-has-children a, .gallery-icon a, .et_social_share, .pagination a, a[href*='#']").click(function(e) {
		if (isloading == false) {
			$(".loader").fadeIn("slow");
		} else {
			$(".loader").fadeOut("slow");
			isloading = false;
		}
	})

})(jQuery);

Please note the line that begins with $(“a”).not. This contains a list of links where we don’t want the animation displayed because they don’t load a new page (sub menus, gallery pictures, social share icons, pagination, and anchor links). If your website contains other types of links where you don’t want the loading icon to be activated, you may need to add to this list.

Step 3 – Add CSS Code

We use this CSS to display and style the animation:

/* Page loading animation */
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url("images/ripple.svg") 50% 50% no-repeat;
	background-color: rgba(255,255,255,0.8);
}

Note that my animation file is named ripple.svg and is saved in the images subdirectory. Be sure to change this to load your file.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This