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.

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>
document.addEventListener('DOMContentLoaded', function() {
}); });
.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;

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!)

Et voila! Thanks for reading!