Adding a Preloader to Your Divi Site

                        /* PRELOADER */
.preloader {
   position: fixed; /* Fixes the preloader to the viewport */
   top: 0; /* Aligns the preloader to the top of the viewport */
   left: 0; /* Aligns the preloader to the left of the viewport */
   right: 0; /* Extends the preloader to the right edge of the viewport */
   bottom: 0; /* Extends the preloader to the bottom edge of the viewport */
   background-color: #fefefe; /* Sets the background color of the preloader */
   z-index: 100000; /* Ensures the preloader is on top of all other elements */
   height: 100%; /* Sets the height to cover the entire viewport */
   width: 100%; /* Sets the width to cover the entire viewport */
   overflow: hidden !important; /* Prevents any overflow content */
}
.preloader .status {
   width: 50px; /* Sets the width of the loading GIF */
   height: 50px; /* Sets the height of the loading GIF */
   position: absolute; /* Positions the GIF absolutely within the preloader */
   left: 50%; /* Centers the GIF horizontally */
   top: 50%; /* Centers the GIF vertically */
   background-image: url(/wp-content/.../loading.gif); /* Sets the loading GIF image */
   background-repeat: no-repeat; /* Prevents the background image from repeating */
   background-position: center; /* Centers the background image */
   -webkit-background-size: cover; /* Ensures the background image covers the container (for WebKit browsers) */
   background-size: cover; /* Ensures the background image covers the container */
   margin: -50px 0 0 -50px; /* Offsets the GIF to perfectly center it */
   opacity: .5; /* Sets the opacity of the GIF */
}
                    

                         // Ensures the whole site is loaded before running the script
    jQuery(window).load(function () {
        "use strict"; // Enforces strict mode to catch common coding errors
        // Checks if the Divi Builder (backend and frontend) is not active
        if (jQuery('.et-bfb').length <= 0 && jQuery('.et-fb').length <= 0) { 
            // Fades out the loading animation
            jQuery(".status").fadeOut();
            // Delays for 1 second, then fades out the whole preloader DIV
            jQuery(".preloader").delay(1000).fadeOut("slow");
        } else {
            // If Divi Builder is active, hides the preloader immediately
            jQuery(".preloader").css('display', 'none');
        }
    }); 

<!-- Preloader DIV that covers the entire website -->
<div class="preloader">
    <!-- Status DIV for the loading animation -->
    <div class="status"></div>
</div>