Get Premium

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.

Important information: Elementor recently came out with their own preloader solution. You can watch my video about the Elementor page transitions and preloader.

I still recommend using the option below, for optimization reasons. The Elementor version is jQuery dependant, so you cannot use the very important Delay JS feature of WP Rocket if you are using it. If you already can’t use that feature, because you have other design elements that requires the Elementor JS & jQuery to be loaded directly, then I suggest you use the Elementor preloader option instead of what I have in this tutorial.

However, if you are looking for the greatest optimization, and don’t want to slow down your whole website just for your preloader, then you should use the instructions below!

The version I have below is written in Vanilla Javascript, so it can easily be excluded from delay JS by adding ‘vanilla-preloader’ in the exclusion list.

Learn more about the delay JS feature of WP Rocket, and how to setup WP Rocket for optimal Elementor performance.

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 1

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

Create an Elementor Preloader - No Plugins Needed 2
left element

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

<script> 
/* Please login to get the code 
 * The code will be for the Create an Elementor Preloader  - No Plugins Needed tutorial 
 * Found at this URL https://element.how/elementor-preloader/ 
 */ 
</script>

That's it! Pretty simple huh!

I also have a few premium tutorials about custom preloaders for Elementor. Check them out:

 

Elementor Premium Smooth Animation Preloader

 

Elementor Premium Images Reveal Preloader

 

Elementor Premium Video Preloader

Extras: a great preloader & an exclusive video on how to make your own branded preloader

Get this great preloader for free!

Simply copy paste the code below (instead of the code above) in an HTML element, et voila! 
<script> 
/* Please login to get the code 
 * The code will be for the Create an Elementor Preloader  - No Plugins Needed tutorial 
 * Found at this URL https://element.how/elementor-preloader/ 
 */ 
</script>

Video Tutorial: How to create your own, branded preloader!

Create it at the loading.io website!

Example of a 100% free preloader I created at loading.io : 

Et voila! Thanks for reading!

You can message me directly if you are interested into having a custom preloader.

Tagged

93 Responses

  1. hello, I have a question regarding the preloader, so I've use it and it ''kinda'' work (im using a gif animation) but I want it to last just a little bit longer , because when I load the page the preloader is way to short, any way that I could do that? thanks alot!

    1. replace the Javascript part with this instead, it will display for a little bit longer

      window.onload = function() {
      jQuery(function($){
      $('.loader').fadeOut('slow');
      });
      };

    2. Maxime Desrosiers Hello and thank you for the code! However, when I copy this - my preloader doesn't stop and the main page never loads. Any idea how to fix it?

      1. Maxime, I have the same issue. This is the only code in the the script tags but it will just preload forever and the page is never revealed:

        window.onload = function() {
        jQuery(function($){
        $('.loader').fadeOut('slow');
        });
        };

      2. Hey Geoff!

        I updated my tutorial recently with Vanilla JS code, I suggest you use that instead! And if you have WP Rocket, read the introduction!

    1. Hello Luke!

      after

      jQuery(function($){

      change this

      $('.loader').fadeOut('slow');

      to this

      setTimeout(function(){
      $('.loader').fadeOut('slow');
      }, 910 );

      and adjust the '910' value to what you need!

    1. This is possible, however the code and setup required is quite a bit more complex, and would depend on the specific requirements of the project. So it is beyond the scope of the article. You can message me however for expert help!

  8. Hello, can I put a SVG javascript code somewhere insade the code you have provided instead of uploading svg file to media and copying a URL? It will help me so much because my own SVG animation does not work when I upload it to WP (but exported svg code works fine when I try to add it to a simple HTML custom code in Elementor and now I want to use it as a preloader but I don't know how) Thank you in advance! 🙂

  11. Hello,
    I'd like to display a preloader on a listing grid during an ajax search, I use jetsmart filter from crocoblock.

    Don't hesitate to contact me, thank you for all these informations.

  14. You know when you see some sites where there's a sort of 'wipe' transition effect when you go to a different page, is that possible with Elementor? Like in this example when you click on the About page or Contact page for example and there's a white wipe effect before the page appears?
    https://bravocreative.co.uk/

    1. Generally, no it's not possible, for most of these kind of AJAX loaded transition.

      However, your specific example is in fact possible... I played with this already. It works... Because this changes the whole page to white, then loads the new page, and swipes the other way, it doesn't require AJAX. So for these kind of page transition, yes it's possible... Beyond the scope of this article though... I might consider creating an article about that at some point.

      If you need this soon in a project, you can send me a message!

  15. This is awesome, thanks! Any idea how to make this work with Elementor forms also? (I have a form with 2 upload items and it takes a buggy-like long time...)

    1. Hmm... good idea, however implementing this in a robust way would require quite a bit of work... It would be better implemented directly by Elementor. Maybe try to submit this as a feature request!

  16. This is really, really wonderful, thank you so much for your hard work for for kindly sharing! Please could I know if this could be limited to show once per session so it doesn't show each time someone visits the homepage, but ony the first time?

    1. Yes this is possible! Use this code instead.

      Script for showing preloader ONLY on the initial session visit:

      <div class="loader" ></div>
      <script>
      var fullscreen = document.querySelector('.loader');
      if ((sessionStorage.getItem('ep') == '1')) {
      fullscreen.style.display = 'none';
      }
      window.sessionStorage.setItem('ep', '1');
      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('https://cdn.element.how/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>

  17. First of all, I would like to thank you for all your helps and great ideas on this website. Then I have already created the code by using the code above but the problem is the size of the preloader is too big for mobile devices and tablets. I also designed the mobile and tablet version of my preloader, Is there any way to add more codes to separate the file's URL for different devices?

    1. Welcome and thank you!

      Yes, this is possible, and quite simple! Just need some media queries in the CSS to set a different image for a different viewport size.

      After this CSS:

      .loader {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: url('https://cdn.element.how/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 */
      }

      Add the following :

      /* Tablet Preloader */
      @media (max-width:1024px){
      .loader {
      background: url('https://cdn.element.how/wp-content/uploads/images/tabletloader.svg') 50% 50% no-repeat #fff;
      }
      }

      /* Mobile Preloader */
      @media (max-width:767px){
      .loader {
      background: url('https://cdn.element.how/wp-content/uploads/images/mobileloader.svg') 50% 50% no-repeat #fff;
      }
      }

    2. Maxime Desrosiers Wowww! Thank You very much for your great answers all the time, everything is working perfectly... Just out of curiosity, I figured out the one time loading the preloader at the initial session visit, is there any way to have a specific preloader for the first time visit, and then setting up another preloader coming up after user decided to go back to Home page again. (ONLY for DESKTOP view)

    3. Bardia Ghobadi Yes this is possible! However this definitely becomes custom work at this point, as it is quite specific. You know where to find me for paid work!

  19. Hello ! And thanks for sharing that ! Any idea how to put a Rive/Flare animation (example : https://rive.app/preview/?filename=dory) so, this code :

    <canvas id="canvas"></canvas>
    <script src="https://unpkg.com/rive-js@0.0.4/dist/rive.js"></script&gt;
    <script>
    // autoplays the first animation in the default artboard
    new Rive({
    src: 'https://cdn.rive.app/animations/dory.riv',
    canvas: document.getElementById('canvas'),
    autoplay: true,
    layout: new Rive.Layout('cover', 'center'),
    })
    </script>

    as preloader ? I'm below beginner, I tried to put that inside .loader{} but the animation is just on the top of the page and doesn't fade out.

    Thank you in advance if you can help me with that !

    1. Bonjour Gabrielle! Essaie avec ce code, et montre moi le résultat!

      <div class="loader" ><canvas id="canvas"></canvas></div>
      <script src="https://unpkg.com/rive-js@0.0.4/dist/rive.js"></script&gt;
      <script>
      /* autoplays the first animation in the default artboard */
      new Rive({
      src: 'https://cdn.rive.app/animations/dory.riv',
      canvas: document.getElementById('canvas'),
      autoplay: true,
      layout: new Rive.Layout('cover', 'center'),
      })
      </script>
      <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: #fff; /* Change the #fff here to your background color of choice for the preloader fullscreen section */
      }
      .elementor-editor-active .loader{
      display: none;
      }
      </style>

    2. Maxime Desrosiers Merci ! Alors, on s'approche, merci ! Voici ce que ça donne : https://ibb.co/k6TLk3d Si l'animation pouvait être centrée ça serait nickel ! (je changerai le background ensuite, comme tu as bien annoté pour qu'on puisse le faire 🙂 )

    4. Maxime Desrosiers The new code, with the animation center :

      <div class="loader" ><canvas id="canvas"></canvas></div>
      <script src="https://unpkg.com/rive-js@0.0.4/dist/rive.js"></script&gt;
      <script>
      /* autoplays the first animation in the default artboard */
      new Rive({
      src: 'https://cdn.rive.app/animations/dory.riv',
      canvas: document.getElementById('canvas'),
      autoplay: true,
      layout: new Rive.Layout('cover', 'center'),
      })
      </script>
      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      setTimeout(function(){
      $('.loader').fadeOut('slow');
      }, 1200 );
      }); });
      </script>
      <style>
      .loader {
      position:absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff; /* Change the #fff here to your background color of choice for the preloader fullscreen section */
      }
      .elementor-editor-active .loader{
      display: none;
      }
      </style>

      It works ! 😀 thanks for your help !!

  21. Thank you for providing this! Is it possible to use this preloader only for while certain widgets/shortcode content is being loaded, such as a shortcode element that pulls a products list via javascript?

    1. Not really no. For these, it really depends on their HTML markup, and how they are coded, to know the optimal way to insert a preloader in there that would only show while it's loading, and be removed when it's ready.

      This pretty much needs to be coded along with the AJAX call, for this to work well at all...

  22. Thank you so much for these great tutorials and that you share your knowledge with us! really amazing! you have helped me so many times!!!!

    2. Maxime Desrosiers hey i tried embedding this code else where (not on elementor) every thing works great but preloader animation does not go away it keeps on repeating over and over again can you please help me out here

  23. Amazing work, we are learning a lot of things from your site.
    I was wondering, how can we make a loading screen like yours, I mean with two different screens before the main site. Just duplicate the code with different styles?

    1. Yes, you could simply duplicate everything, and adjust the code! And if you need more advanced modifications for it, I'm available for custom work.

      1. Hi Maxime, I tried to check with other browsers and it's not appearing on mobile-view.

        My website is.

        ajvicedor.com
        pw: 6129

        By the way, I used a png logo for the preloader. Is there a way to add a transition for the logo, like fade-up? Thanks 🙂

  25. Hi, Maxime! Thanks for your tutorials it helps us a lot. Actually I am using a gif preloader to my site so the problem is when some one visit to my site the preloader works perfect but when they reload the webpage sometimes the gif animate infinit it doesn't show the home page if they click on the gif then it shows. Can you please give a solutions about that.......here is the demo: https://abzovee.kroyxon.com/

    1. Hey Turjo!

      Looks like it's because of your optimization. You have delay JS set. So the code to remove the preloader isn't running until user interaction. You need to exclude that bit of code from the delay JS feature.

  26. Bonjour Maxime,

    Je tente de différer le JS pour le loader selon ton exemple avec WP Rocket, mais je ne trouve pas le fichier .JS pour le defer est-ce que tu peux me donner un petit coup de main ?

    Merci

    1. Great point Loup!

      I updated my tutorial with the information for this, and the code is updated as well. In short, just use the updated code, and add 'vanilla-preloader' to the exclusion list!

  27. HI, it works just fine.
    I just want to know how do I make my loading screen for longer, i can´t even see my animation.

    thank you for the code.

  28. Thanks so much! I did some configuration to the code to make my gif cover as much of the screen as possible (didn't use "cover" since wanted a little padding around). I'm not the best coder of JS but this was the best I could put together. Sharing for all and of course, Maxime, let me know if it is well-coded or not. For tablet and mobile left it simple and no adjusting image size.

    document.addEventListener('DOMContentLoaded', function() {
    let loader = document.querySelector('.vanilla-preloader');
    loader.style.opacity = 0.999;
    loader.addEventListener('transitionend', () => loader.remove());
    });

    .vanilla-preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    transition: 5.3s;
    pointer-events:none;
    background: url('TYPE YOUR GIF FILE HERE');
    background-size: 1000px 620px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;

    /* Tablet Preloader */
    @media (max-width:1024px){
    .loader {
    background: url('TYPE YOUR GIF FILE HERE') 50% 50% no-repeat #000;
    }
    }

    /* Mobile Preloader */
    @media (max-width:767px){
    .loader {
    background: url('TYPE YOUR GIF FILE HERE') 50% 50% no-repeat #000;
    }
    }
    }

    .elementor-editor-active .vanilla-preloader {
    display: none;
    }

    1. Thanks for sharing! Yes your CSS is good! Just this bit is useless as the selector ( .loader ) doesn't match anything, and even if it did, it would be redundant as the desktop CSS was the same.

      /* Tablet Preloader */
      @media (max-width:1024px){
      .loader {
      background: url('TYPE YOUR GIF FILE HERE') 50% 50% no-repeat #000;
      }
      }

      /* Mobile Preloader */
      @media (max-width:767px){
      .loader {
      background: url('TYPE YOUR GIF FILE HERE') 50% 50% no-repeat #000;
      }
      }
      }

    1. Hey Viktoria!

      Yes that one was custom work for a client. The tutorial shows how to make a more simple preloader, essentially it shows how to have an animated SVG on a solid color background.

  31. Is it possible to add a delay before the ending animation happens?
    "

    document.addEventListener('DOMContentLoaded', function() {
    let loader = document.querySelector('.vanilla-preloader');
    loader.style.opacity = 0;
    loader.addEventListener('transitionend', () => loader.remove());
    });

    .vanilla-preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    transition: 0.4s opacity;
    pointer-events:none;
    background: url('https://cdn.element.how/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 .vanilla-preloader {
    display: none;
    }

    "
    In that code?

    1. Hey Justin!

      Yes. Simply change the line:

      loader.style.opacity = 0;

      to

      setTimeout(function(){
      loader.style.opacity = 0;
      }, 910 );

      Then adjust that 910 value to fit your needs.

  32. Hello, is there a way to add Loading in Elementor Form's form button? Especially in Multi step, when going from step 1 to step 2.
    Thx

  34. Hi,
    Thank you for the code. Kindly, I have a question.

    in the comment section you have this code to show the preloader once per visit

    var fullscreen = document.querySelector('.loader');
    if ((sessionStorage.getItem('ep') == '1')) {
    fullscreen.style.display = 'none';
    }
    window.sessionStorage.setItem('ep', '1');
    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $('.loader').fadeOut('slow');
    }); });

    .loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('https://cdn.element.how/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;
    }

    And it works perfectly fine, but I need the preloader to show for 5.5 secs and when I replace

    $('.loader').fadeOut('slow');

    by

    setTimeout(function(){
    $('.loader').fadeOut('slow');
    }, 5500);

    Nothing happens, and it just shows for a small amount of time and not the whole 5500 (5.5 secs)

  35. Love your preloader for elementor!
    I wanted to ask how to preload a page or template for 3 sec, listed of an SVG. I have designed a template with animation and want it to be displayed on a page load, to have a sort of transition animation effect between pages.

    1. Hey Alex!

      You can try just adding the shortcode to your section here:

      <div class="vanilla-preloader" ></div>

      like this

      <div class="vanilla-preloader" >[elementor-template id="44771"]</div>

      If the shortcode doesn't render the template, try adding the whole code in the Shortcode element instead. It also accepts HTML and code just fine, but it will render shortcodes.

      Let me know if that works for you!

  36. Hello,

    This was working but after installing google tag manager into the source code it now only works for phones... how do I fix this thank you!

    1. Hey Rio!

      Yes it's possible however the complexity involved both in creating a SVG that's formatted exactly as required, and then making use of that JS library, is well beyond the intended scope of this tutorial...

      Hope you understand.

      Cheers!

  39. Hi, there! Is there a way to edit this so someone could close out of the preloader animation using the ESC key?
    I have been trying to edit the code to make it work, but I am totally missing something because it's not working, yet, haha.

    1. Greetings Sky!

      For this, change the JavaScript part of the code to this:

      let loader = document.querySelector('.vanilla-preloader');

document.addEventListener('DOMContentLoaded', function () {
	loader.style.opacity = 0;
	loader.addEventListener('transitionend', () => loader.remove());
});

/* on ESC key, remove the loader */
document.addEventListener('keydown', function (e) {
	if (e.key === 'Escape' && loader) {
		loader.remove();
	}
});

      Cheers!

      Maxime

  40. hi maxime can we create a preloader in elemenor that shows the logo and below the logo a button by title of Enter and when visitor clicks/taps the enter button than the whole website loads

Leave a Reply