Preloader#3

HTML
<div class="wrapper"> <div class="loader"></div> <div class="loader"></div> <div class="loader"></div> <div class="loader"></div> <div class="loader"></div> <div class="loader"></div> <div class="loader"></div> <div class="loader"></div> <div class="loader"></div> </div>
CSS
body { background: #2196F3; } .wrapper { position: absolute; top: 50%; left: 50%; width: 304px; height: 30px; border: 4px #fff solid; margin: -15px 0 0 -152px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); overflow: hidden; } .loader { position: relative; display: inline-block; background: #fff; opacity: 0; width: 20px; height: 20px; margin: 5px; box-shadow: 2px 4px 6px rgba(0,0,0,0.5); animation: opacity 6s infinite; } .loader:nth-child(1) { animation-delay: 0.3s; } .loader:nth-child(2) { animation-delay: 0.6s; } .loader:nth-child(3) { animation-delay: 0.9s; } .loader:nth-child(4) { animation-delay: 1.2s; } .loader:nth-child(5) { animation-delay: 1.5s; } .loader:nth-child(6) { animation-delay: 1.8s; } .loader:nth-child(7) { animation-delay: 2.1s; } .loader:nth-child(8) { animation-delay: 2.4s; } .loader:nth-child(9) { animation-delay: 2.7s; } @keyframes opacity { 0% { opacity: 0; } 5% { opacity: 1; } 50% { opacity: 1; } 100% { opacity: 0; } }
JAVASCRIPT
Expand for more options Login