HTML
<div class="wave-loader">
<div class="layer-1"></div>
<div class="layer-2"></div>
<div class="layer-3"></div>
<div class="layer-4"></div>
<div class="layer-5"></div>
<div class="layer-6"></div>
<div class="layer-7"></div>
<div class="layer-8"></div>
<div class="layer-9"></div>
<div class="layer-10"></div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #2C3E50;
}
.wave-loader {
width: 410px;
height: 140px;
}
.wave-loader > div {
float: left;
background: #B96CFF;
height: 100%;
width: 40px;
margin-right: 1px;
display: inline-block;
}
.layer-5 {
animation-delay: 0.25s;
}
.wave-loader > div {
position: relative;
bottom: 0;
margin-top: 35px;
height: 5px;
animation: loading 1.5s infinite ease-in-out;
}
.wave-loader .layer-1 { animation-delay: -1.5s; }
.wave-loader .layer-2 { animation-delay: -1.4s; }
.wave-loader .layer-3 { animation-delay: -1.3s; }
.wave-loader .layer-4 { animation-delay: -1.2s; }
.wave-loader .layer-5 { animation-delay: -1.1s; }
.wave-loader .layer-6 { animation-delay: -1s; }
.wave-loader .layer-7 { animation-delay: -0.9s; }
.wave-loader .layer-8 { animation-delay: -0.8s; }
.wave-loader .layer-9 { animation-delay: -0.7s; }
.wave-loader .layer-10 { animation-delay: -0.6s; }
/*.layer-11 { animation-delay: -0.5s; }*/
@keyframes loading {
50% {
height: 100%;
margin-top: 0;
background: #56D7C6;
}
}
2 Responses