<div class="page-bg"></div>
<div class="preloader">
<div class="preloader-box">
<div>L</div>
<div>O</div>
<div>A</div>
<div>D</div>
<div>I</div>
<div>N</div>
<div>G</div>
</div>
</div>
* {
padding: 0px;
margin: 0px;
}
body {
overflow: hidden;
}
.page-bg {
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: url('https://i.imgur.com/BlihuYt.jpg') center;
-webkit-filter: blur(0px);
z-index: 10;
}
.preloader {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: -webkit-radial-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,0.8));
z-index: 10;
}
.preloader > .preloader-box {
position: absolute;
width: 345px;
height: 30px;
top: 50%;
left: 50%;
margin: -15px 0 0 -150px;
-webkit-perspective: 200px;
}
.preloader .preloader-box > div {
position: relative;
width: 30px;
height: 30px;
background: #CCC;
float: left;
text-align: center;
line-height: 30px;
font-family: Verdana;
font-size: 20px;
color: #FFF;
}
.preloader .preloader-box > div:nth-child(1) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 0ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(2) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 75ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(3) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 150ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(4) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 225ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(5) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 300ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(6) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 375ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(7) {
background: #3366FF;
margin-right: 15px;
-webkit-animation: movement 600ms ease 450ms infinite alternate;
}
.preloader .preloader-box > div:nth-child(8) {
background: #3366FF;
-webkit-animation: movement 600ms ease 525ms infinite alternate;
}
@-webkit-keyframes movement {
from {
-webkit-transform: scale(1.0) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
to {
-webkit-transform: scale(1.5) translateY(-25px) rotateX(45deg);
box-shadow: 0 25px 40px rgba(0,0,0,0.4);
background: #3399FF;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.