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.
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="vanilla-preloader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let loader = document.querySelector('.vanilla-preloader');
loader.style.opacity = 0;
loader.addEventListener('transitionend', () => loader.remove());
});
</script>
<style>
.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;
}
</style>
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
Extras: a great preloader & an exclusive video on how to make your own branded preloader
Get this great preloader for free!
<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() {
setTimeout(function(){
document.body.classList.add('vanilla-preloader');
}, 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 */
.vanilla-preloader #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);
}
.vanilla-preloader #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);
}
.vanilla-preloader #loader {
opacity: 0;
transition: all 0.3s ease-out;
}
.vanilla-preloader #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!
You can message me directly if you are interested into having a custom preloader.
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!
replace the Javascript part with this instead, it will display for a little bit longer
window.onload = function() {
jQuery(function($){
$('.loader').fadeOut('slow');
});
};
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?
Anica Šimunec It depends on exactly how you have written this... it should be the only thing in the <script> tags
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');
});
};
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!
thanks man - generous of you to give this away.
You are welcome!
Hello, is there any way to allow the GIF finish one loop before page is shown?
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!
that's great. however, any ideas why my preloader does not cover the fullscreen?
Any advice how to fix it?
I could not say, without seeing the page! If you can, share your URL. I will have a look
Maxime Desrosiers sure, its - https://omer-thinker.com/ and thanks again 🙂
Omer Bin I only see 'website coming soon' ...
Muchas gracias, el codigo fue de gran ayuda para mi website personal.
Glad to hear this!
is there any chance to just load it once and not with any refersh?
Yes, this is possible. It requires some extra coding though. Beyond the scope of the current article!
Maxime Desrosiers thank you very much! do you know a place where i can find an answer?
Pascal Bueb You can send me a message through Messenger.
Hello, how could it be done with an intro video?
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!
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! 🙂
hey Szymon!
Insert the SVG here, at the beginning of the code:
<div class="loader" > <svg markup here></svg> </div>
Thanks for the code! Can a Lottie animation be used? https://lottiefiles.com/
Yes, this is possible! However it requires quite a different strategy. I will add this to my article soon.
Maxime Desrosiers Lottie would be sick ????
Hello, I have one problem. It is not shown on the Home page, but it works perfect on other pages. What could it be? https://www.klout.studio/
You can't use a .json file there. It has to be a image format.
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.
Works perfectly!
Thank you very much for your sharing, I do have one question, can I add a fade in effect effect when the preloader appears?
This is possible but it requires some extra coding...
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/
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!
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...)
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!
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?
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>
Maxime Desrosiers Wow, wow, wow - thank you sir!
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?
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;
}
}
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)
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!
Hi, thank you for this post is very helpful, I have a question how can I change the size of the gif?
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>
<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 !
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>
<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>
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 🙂 )
Peut-être une position pas fixe mais relative ? (Mais je n'ai aucune idée de comment écrire ça)
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>
<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 !!
Cerrydween Meow Thank you for that!
Gab Rielle What Cerrydween shared should work just fine!
Thank you ! That's perfect !
Un plaisir!
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?
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...
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!!!!
Welcome!
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
Arbaz Khan Maybe your 'else where' doesn't have jQuery ? jQuery is needed for the above code to work.
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?
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.
Hi Maxime, great tutorial! I've added the pre-loader but it won't load on mobile, is there a way to fix this? Thanks
Hey Jermaine! I would need to see your page to have an idea...
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 🙂
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/
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.
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
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!
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.
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;
}
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;
}
}
}
is this how I do a preloader similar to the one on this website? or is this one done differently?
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.
Please Share Code Of
https://templates.element.how/elementor-sleek-images-preloader-template/
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?
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.
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
Hey Yuri!
That's possible however it is quite complex. I might create a tutorial about this at some point.
Hi, Thank you for sharing! Do I have to have WP Rocket installed? the preloaded doesn't work for me.
Nope WP Rocket isn't required for this tutorial to work...
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)