Flat Dots Wave Loader

HTML
<div> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
CSS
body { background: #e74c3c; min-width: 800px; min-height: 600px; overflow: hidden; } div { position: absolute; width: 400px; height: 300px; top: 50%; left: 50%; margin: -150px 0 0 -200px; text-align: center; } span { display: inline-block; width: 20px; height: 20px; margin: 145px 3px 0; background: rgba(255,255,255,0.25); border-radius: 50%; transform: translateY(0); animation: wave 2s infinite ease-in-out; } span:nth-child(1) { animation-delay: 0s; } span:nth-child(2) { animation-delay: 0.1s; } span:nth-child(3) { animation-delay: 0.2s; } span:nth-child(4) { animation-delay: 0.3s; } span:nth-child(5) { animation-delay: 0.4s; } /* Animation */ @keyframes wave { 0%,60%,100% { background: rgba(255,255,255,0.25); transform: translateY(0); } 20% { background: rgba(255,255,255,0.75); transform: translateY(20px); } 40% { background: rgba(255,255,255,0.75); transform: translateY(-20px); } }
JAVASCRIPT
Expand for more options Login