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

Elementor Close PopUp on Click for Menu & Same Page Links
left element

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

<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.loader').fadeOut('slow');
}); });
</script>
<style>
.elementor-element-edit-mode .loader{
display: none;
}
.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!

Et voila! Thanks for reading!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Elements Finder>

Quickly search across all the main Elementor Addons.

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Comments are closed.