.page-loader {
position: fixed;
background: #fff;
bottom: 0;
right: 0;
left: 0;
top: 0;
z-index: 99999;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.loader {
margin: 0 auto;
width: 80px;
height: 70px;
text-align: center;
font-size: 10px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
.loader > div {
height: 100%;
width: 10px;
display: inline-block;
float: left;
margin-left: 2px;
-webkit-animation: delay 0.8s infinite ease-in-out;
animation: delay 0.8s infinite ease-in-out;
}
.loader .bar1 {
background-color: #754fa0;
}
.loader .bar2 {
background-color: #09b7bf;
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.loader .bar3 {
background-color: #90d36b;
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.loader .bar4 {
background-color: #f2d40d;
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.loader .bar5 {
background-color: #fcb12b;
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.loader .bar6 {
background-color: #ed1b72;
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
@-webkit-keyframes delay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.05);
}
20% {
-webkit-transform: scaleY(1);
}
}
@keyframes delay {
0%, 40%, 100% {
transform: scaleY(0.05);
-webkit-transform: scaleY(0.05);
}
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
}