How To Add A Preloader To A Divi Website | Ready Steady Digital - Ready Steady Digital

In this video, you will learn how you can add a preloader to a Divi website. A preloader is a small animation which is shown to the visitors of your website while the content of your page is still loading.

CSS Code

.rsd-loader {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #F8F8FF;
   z-index: 9999999;
   height: 100%;
   width: 100%;
   overflow: hidden !important;
   position: fixed;
}
.rsd-loader .rsd-st {
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   background-image: url(#URL-Here);
   background-repeat: no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   background-size: cover;
   margin: -50px 0 0 -50px;
}

JS Code

 //MAKE SURE YOU ADD SCRIPT TAGS
  type="text/javascript">
 // makes sure the whole site is loaded
    jQuery(window).load(function () {
        "use strict";
        // will first fade out the loading animation
 if(  jQuery( '.et-bfb' ).length <= 0 && jQuery( '.et-fb' ).length <= 0  ){ 
 jQuery(".rsd-st").fadeOut();
 // will fade out the whole DIV that covers the website.
 jQuery(".rsd-loader").delay(1000).fadeOut("slow");
 }else{
 jQuery(".rsd-loader").css('display','none');
 }
    }); 

HTML CODE

<div class=”rsd-loader”>
<div class=”rsd-st”></div>
</div>