How To Add a Preloader To A Divi Website without plugin

Find Your Animation loading gif format file free & pro Download link or You can Create from Photoshop

Login Website

Copy This CSS Code

/*-----loading----*/
.loader {
    position: fixed;
    z-index: 99999999999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader > img {
    width: 100px;
}

.loader.hidden {
    animation: fadeOut .05s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.thumb {
    height: 100px;
    border: 1px solid black;
    margin: 10px;
}
/*-----end----*/

Click Divi Theme Option ->  Custom CSS ->
Paste Custome CSS Holder

Copy  JS Code 

/*-----loader Hidden----script---*/
    
window.addEventListener("load", function () {
    const loader = document.querySelector(".loader");
    loader.className += " hidden"; // class "loader hidden"
});
 
/*-----end----script-----*/

Click Divi Theme Options -> Integration -> Add code to the < head > of your blog
Paste JS Code Holder

Copy HTML Code

<div class="loader">
    <img src="----add you LOADING ICON link gif format file---" alt="Loading..." /></div>

Click Divi Theme Options -> Integration ->  Add code to the < body > (good for tracking codes such as google analytics)

Paste HTML Code Holder

Chick Demo Website