Add this code on a HTML widget to activate preloader. You have to insert your own icon/image URL. See example below.
IMPORTANT
The HTML widget has to be the first one to load. Try to put it on the top of the page or header and see how it goes. And remember to change the background color to match your site’s.
<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
setTimeout(function(){
$('.loader').fadeOut('slow');
}, 910 );
}); });
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
transition: 0.4s opacity;
background: url('/wp-content/ADD YOUR FILE URL HERE')
50% 50%/50px 50px no-repeat #1E1E1E; /* CHANGE THE BACKGROUND COLOR */
}
@media (max-width:767px){
.loader {
background: url('/wp-content/ADD YOUR FILE URL HERE TOO')
50% 50%/30px 30px no-repeat #1E1E1E;/* CHANGE THE BACKGROUND COLOR HERE TOO */
}
}
.elementor-editor-active .loader{
display: none;
}
</style>
<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
setTimeout(function(){
$('.loader').fadeOut('slow');
}, 910 );
}); });
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
transition: 0.4s opacity;
background: url('/wp-content/uploads/sites/3/2022/02/Rolling-1s-200px-1.gif') 50% 50%/50px 50px no-repeat #1E1E1E;
}
@media (max-width:767px){
.loader {
background: url('/wp-content/uploads/sites/3/2022/02/Rolling-1s-200px-1.gif') 50% 50%/30px 30px no-repeat #1E1E1E;
}
}
.elementor-editor-active .loader{
display: none;
}
</style>
Here’s a GIF icon for you. Feel free to download and use it for your sites. If you want to make your own icons go to this site.
