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 : 

Finally, to get this hexagonal preloader instead, use the code below !

    
    <div class="loader"><div class="preloader loading">
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
</div></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:#fff;
}
.elementor-editor-active .loader{
display: none;
}

/* Hexagonal Preloader from this codepen : https://codepen.io/weaintplastic/pen/qEMZbx , adapted for easy use in Elementor */

@-webkit-keyframes preload-show-1 {
from {
-webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-show-1 {
from {
-webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-hide-1 {
to {
-webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-1 {
to {
-webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-cycle-1 {
5% {
-webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
10%,
75% {
-webkit-transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
80%,
100% {
-webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-1 {
5% {
-webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
10%,
75% {
-webkit-transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
80%,
100% {
-webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-show-2 {
from {
-webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-show-2 {
from {
-webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-hide-2 {
to {
-webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-2 {
to {
-webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-cycle-2 {
10% {
-webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
15%,
70% {
-webkit-transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
75%,
100% {
-webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-2 {
10% {
-webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
15%,
70% {
-webkit-transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
75%,
100% {
-webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-show-3 {
from {
-webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-show-3 {
from {
-webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-hide-3 {
to {
-webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-3 {
to {
-webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-cycle-3 {
15% {
-webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
20%,
65% {
-webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
70%,
100% {
-webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-3 {
15% {
-webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
20%,
65% {
-webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
70%,
100% {
-webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-show-4 {
from {
-webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-show-4 {
from {
-webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-hide-4 {
to {
-webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-4 {
to {
-webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-cycle-4 {
20% {
-webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
25%,
60% {
-webkit-transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
65%,
100% {
-webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-4 {
20% {
-webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
25%,
60% {
-webkit-transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
65%,
100% {
-webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-show-5 {
from {
-webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-show-5 {
from {
-webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-hide-5 {
to {
-webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-5 {
to {
-webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-cycle-5 {
25% {
-webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
30%,
55% {
-webkit-transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
60%,
100% {
-webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-5 {
25% {
-webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
30%,
55% {
-webkit-transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
60%,
100% {
-webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-show-6 {
from {
-webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-show-6 {
from {
-webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-hide-6 {
to {
-webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-6 {
to {
-webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-cycle-6 {
30% {
-webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
35%,
50% {
-webkit-transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
55%,
100% {
-webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-6 {
30% {
-webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
35%,
50% {
-webkit-transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
55%,
100% {
-webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@-webkit-keyframes preload-flip {
0% {
-webkit-transform: rotateY(0deg) rotateZ(-60deg);
transform: rotateY(0deg) rotateZ(-60deg);
}
100% {
-webkit-transform: rotateY(360deg) rotateZ(-60deg);
transform: rotateY(360deg) rotateZ(-60deg);
}
}
@keyframes preload-flip {
0% {
-webkit-transform: rotateY(0deg) rotateZ(-60deg);
transform: rotateY(0deg) rotateZ(-60deg);
}
100% {
-webkit-transform: rotateY(360deg) rotateZ(-60deg);
transform: rotateY(360deg) rotateZ(-60deg);
}
}
.preloader {
position: absolute;
top: 50%;
left: 50%;
font-size: 20px;
display: block;
width: 3.75em;
height: 4.25em;
margin-left: -1.875em;
margin-top: -2.125em;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotateY(180deg) rotateZ(-60deg);
transform: rotateY(180deg) rotateZ(-60deg);
}
.preloader .slice {
border-top: 1.125em solid transparent;
border-right: none;
border-bottom: 1em solid transparent;
border-left: 1.875em solid #f7484e;
position: absolute;
top: 0px;
left: 50%;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
border-radius: 3px 3px 0 0;
}
.preloader .slice:nth-child(1) {
-webkit-transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
-webkit-animation: 0.15s linear 0.82s preload-hide-1 both 1;
animation: 0.15s linear 0.82s preload-hide-1 both 1;
}
.preloader .slice:nth-child(2) {
-webkit-transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
-webkit-animation: 0.15s linear 0.74s preload-hide-2 both 1;
animation: 0.15s linear 0.74s preload-hide-2 both 1;
}
.preloader .slice:nth-child(3) {
-webkit-transform: rotateZ(180deg) rotateY(0deg) rotateX(0);
transform: rotateZ(180deg) rotateY(0deg) rotateX(0);
-webkit-animation: 0.15s linear 0.66s preload-hide-3 both 1;
animation: 0.15s linear 0.66s preload-hide-3 both 1;
}
.preloader .slice:nth-child(4) {
-webkit-transform: rotateZ(240deg) rotateY(0deg) rotateX(0);
transform: rotateZ(240deg) rotateY(0deg) rotateX(0);
-webkit-animation: 0.15s linear 0.58s preload-hide-4 both 1;
animation: 0.15s linear 0.58s preload-hide-4 both 1;
}
.preloader .slice:nth-child(5) {
-webkit-transform: rotateZ(300deg) rotateY(0deg) rotateX(0);
transform: rotateZ(300deg) rotateY(0deg) rotateX(0);
-webkit-animation: 0.15s linear 0.5s preload-hide-5 both 1;
animation: 0.15s linear 0.5s preload-hide-5 both 1;
}
.preloader .slice:nth-child(6) {
-webkit-transform: rotateZ(360deg) rotateY(0deg) rotateX(0);
transform: rotateZ(360deg) rotateY(0deg) rotateX(0);
-webkit-animation: 0.15s linear 0.42s preload-hide-6 both 1;
animation: 0.15s linear 0.42s preload-hide-6 both 1;
}
.preloader.loading {
-webkit-animation: 2s preload-flip steps(2) infinite both;
animation: 2s preload-flip steps(2) infinite both;
}
.preloader.loading .slice:nth-child(1) {
-webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0);
transform: rotateZ(60deg) rotateY(90deg) rotateX(0);
-webkit-animation: 2s preload-cycle-1 linear infinite both;
animation: 2s preload-cycle-1 linear infinite both;
}
.preloader.loading .slice:nth-child(2) {
-webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0);
transform: rotateZ(120deg) rotateY(90deg) rotateX(0);
-webkit-animation: 2s preload-cycle-2 linear infinite both;
animation: 2s preload-cycle-2 linear infinite both;
}
.preloader.loading .slice:nth-child(3) {
-webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0);
transform: rotateZ(180deg) rotateY(90deg) rotateX(0);
-webkit-animation: 2s preload-cycle-3 linear infinite both;
animation: 2s preload-cycle-3 linear infinite both;
}
.preloader.loading .slice:nth-child(4) {
-webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0);
transform: rotateZ(240deg) rotateY(90deg) rotateX(0);
-webkit-animation: 2s preload-cycle-4 linear infinite both;
animation: 2s preload-cycle-4 linear infinite both;
}
.preloader.loading .slice:nth-child(5) {
-webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0);
transform: rotateZ(300deg) rotateY(90deg) rotateX(0);
-webkit-animation: 2s preload-cycle-5 linear infinite both;
animation: 2s preload-cycle-5 linear infinite both;
}
.preloader.loading .slice:nth-child(6) {
-webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0);
transform: rotateZ(360deg) rotateY(90deg) rotateX(0);
-webkit-animation: 2s preload-cycle-6 linear infinite both;
animation: 2s preload-cycle-6 linear infinite both;
}

</style>