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($){
    // Insert a page loading overlay div which contains the animation.
    $('#et-main-area').prepend('<div class="trg-page-load-overlay"></div>');
    var isloading = true;

    // When the page has fully loaded, hide the overlay
    $(window).load(function() {
        $(".trg-page-load-overlay").fadeOut("slow");
        isloading = false;
    })

    // Attach a click event to links that load new pages (AJAX-style links and same-page anchor links are excluded) 
    $("a").not(".gallery-icon a, .et_social_share, .pagination a, a[href*='#']").click(function(e) {
        // If the page loading isn't already active, display the page loading overlay
        if (isloading == false) {
            $(".trg-page-load-overlay").fadeIn("slow");
            isloading = true;
        } else {
            $(".trg-page-load-overlay").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:

.trg-page-load-overlay {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url("images/pacman.svg") 50% 50% no-repeat; //replace the url with the path to your animated SVG file
    background-color: rgba(255, 255, 255, 0.8);
}

Note that my animation file is named pacman.svg and is saved in the images sub-directory. Be sure to change this to load your file.

Note: This article was updated on Feb. 28, 2022 with revised code to accommodate changes in Divi.

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