Preloader! Refresh the page to see the preloader in action!

Preloader template

Simply copy paste this code in an html Element, same instructions as the Elementor preloader article. (except the need for your own SVG URL ! )

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