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>