Create a Preloader for Your Elementor Website

Place it only on the pages where it is needed! Adding an Elementor preloader to your Elementor pages is pretty simple.

To begin with, simply find a SVG or GIF of your liking, preferably one very light in size.

This website is a great resource for simple and free SVG loaders. In this example, I picked that one.

Create an Elementor Preloader  - No Plugins Needed

Then, create a new section at the very top of the page in which you want to add the Elementor preloader

Change this section's settings to no gap. If you want to add the preloader to every pages on the website, create the new section in the header template.

Finally, Insert an HTML element in this section, and add the following code

You will have to replace the url for the loader with your own.

<div class="loader" ></div>
<script>
jQuery(document).ready(function($){
window.onload = function (){
$('.loader').fadeOut('slow');
};
});
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('/wp-content/uploads/images/loader.svg') 50% 50% no-repeat #fff;
}
</style>

That's it! Pretty simple huh!

IMPORTANT! When editing the page, the loader will appear, and will not disappear!

You will have to either go in the navigation and turn off visibility for the section containing the HTML element

Or to go click on the html element and add the CSS display:none

Et voila! Thanks for reading!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

Your email address will not be published. Required fields are marked *