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>
<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.

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!
    
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
setTimeout(function(){
$('body').addClass('loaded');
}, 910 );
}); });
</script>
<style>
.elementor-editor-active #loader-wrapper {
display: none;
}

/* Preloader from this codepen : https://codepen.io/niyazpoyilan/pen/PGQKZK , adapted for easy use in Elementor */

#loader-wrapper {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:10009;
}
#loader {
display:block;
position: relative;
top:50%;
left:50%;
width:150px;
height:150px;
margin:-75px 0 0 -75px;
border:3px solid transparent;
border-top-color:white;
border-radius:100%;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index:1001;
}
#loader:before {
content:"";
position: absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:3px solid transparent;
border-top-color: yellow;
border-radius:100%;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content:"";
position: absolute;
top:12px;
left:12px;
right:12px;
bottom:12px;
border:3px solid transparent;
border-top-color:orange;
border-radius:100%;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}

#loader-wrapper .loader-section {
position:fixed;
top:0;
background:#333;
width:51%;
height:100%;
z-index:1000;
}

#loader-wrapper .loader-section.section-left {
left:0
}
#loader-wrapper .loader-section.section-right {
right:0;
}

/* Loaded Styles */
.loaded #loader-wrapper .loader-section.section-left {
transform: translateX(-100%);
transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded #loader-wrapper .loader-section.section-right {
transform: translateX(100%);
transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded #loader {
opacity: 0;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
transform:translateY(-100%);
transition: all 0.3s 1s ease-out;
}

</style>

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!

63 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. 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!

  2. 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! 🙂

  3. 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.

  4. 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!

  5. 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!

  6. 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('/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>

  7. 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('/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('/wp-content/uploads/images/tabletloader.svg') 50% 50% no-repeat #fff;
      }
      }

      /* Mobile Preloader */
      @media (max-width:767px){
      .loader {
      background: url('/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!

  8. 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 🙂 )

    3. 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 !!

  9. 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...

  10. 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!!!!

    1. 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

  11. 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 🙂

Leave a Reply