Wave Loader

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; } }
JAVASCRIPT
Expand for more options Login