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"
});
</script>
/*-----end----*/

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