Beautiful Creations Wonderful Presention
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.
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>
document.addEventListener('DOMContentLoaded', function() {
jQuery(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; /* Change the #fff here to your background color of choice for the preloader fullscreen section */
}
.elementor-editor-active .loader{
display: none;
}
</style>
That's it! Pretty simple huh!
I also offer my services for custom preloaders. See an example for a client here:
And here is another great preloader example
You can message me directly if you are interested into having a custom preloader. I mostly work with small agencies and freelancers.
Want some FREE preloader templates AND an exclusive video tutorial on how to make your own branded preloader?
Simply enter your email below!
Example of branded preloader (learn how to make your own!)
