Skip to main content
HashnodeDivi Code

Command Palette

Search for a command to run...

Preloader: Three Vertical Squares

Updated
•0 min read•View as Markdown
D
Divi Code | New Divi on the Block

Source: Codepen

Paste this code on: Divi > Divi Theme Options > Integration > Add code to the < head > of your blog.

<div class="wrap">
<div class="loader animate-1">
</div>
<div class="loader animate-2">
</div>
<div class="loader animate-3">
</div>
</div>

<script>
jQuery(document).ready(function() {
//Preloader
jQuery(window).load(function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = jQuery('.wrap');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});
</script>

Paste this code on: Divi > Theme Options > Custom CSS:

/* PRELOADER SQUARES CSS */
body {
  background: #111;
}


.loader {
  width: 80px;
  height: 80px;
  border: 2px dotted #505cfd;
  margin:auto;
  padding-right:20px;
  text-align:center;
  position:relative;
  top:35%;
}

.wrap {width:100vw; height:100vh; background-color:#000;z-index:999999999; margin:0 auto;position:fixed;}

.animate-1 {
  -webkit-animation: grow 1s infinite;
  -ms-animation: grow 1s infinite;
  -moz-animation: grow 1s infinite;
  -o-animation: grow 1s infinite;
  animation: grow 1s infinite;
}

.animate-2 {
  -webkit-animation: grow2 1s infinite;
  -ms-animation: grow2 1s infinite;
  -moz-animation: grow2 1s infinite;
  -o-animation: grow2 1s infinite;
  animation: grow2 1s infinite;
  -webkit-animation-delay: 0.3s;
  -ms-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.animate-3 {
  -webkit-animation: grow 1s infinite;
  -ms-animation: grow 1s infinite;
  -moz-animation: grow 1s infinite;
  -o-animation: grow 1s infinite;
  animation: grow 1s infinite;
  -webkit-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

/*****************************************
GOT TOO LAZY TO IMPLEMENT ANIMATION MIXIN
*****************************************/
@-webkit-keyframes grow {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
}
@-moz-keyframes grow {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
}
@-o-keyframes grow {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
}
@-ms-keyframes grow {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
}
@keyframes grow {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
}
@-webkit-keyframes grow2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.7);
    -ms-transform: scale(1.7);
    -moz-transform: scale(1.7);
    -o-transform: scale(1.7);
    transform: scale(1.7);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
}
@-moz-keyframes grow2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.7);
    -ms-transform: scale(1.7);
    -moz-transform: scale(1.7);
    -o-transform: scale(1.7);
    transform: scale(1.7);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
}
@-o-keyframes grow2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.7);
    -ms-transform: scale(1.7);
    -moz-transform: scale(1.7);
    -o-transform: scale(1.7);
    transform: scale(1.7);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
}
@-ms-keyframes grow2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.7);
    -ms-transform: scale(1.7);
    -moz-transform: scale(1.7);
    -o-transform: scale(1.7);
    transform: scale(1.7);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
}
@keyframes grow2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.7);
    -ms-transform: scale(1.7);
    -moz-transform: scale(1.7);
    -o-transform: scale(1.7);
    transform: scale(1.7);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
}
71 views

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Divi Code

78 posts