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