CSS Loader Animation

CSS Loader Animation

HTML

<div class="wrapper"> <div class="dot"> </div> <div class="dot"> </div> <div class="dot"> </div> <div class="dot"> </div> <div class="dot"> </div> </div>


CSS


body { background-color: #262626; } .wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .dot { display: inline-block; width: 30px; height: 30px; border-radius: 100%; margin: 0 5px; box-shadow: 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ; } .dot:nth-last-child(1) { animation: animate 1s .1s linear infinite; } .dot:nth-last-child(2) { animation: animate 1s .2s linear infinite; } .dot:nth-last-child(3) { animation: animate 1s .3s linear infinite; } .dot:nth-last-child(4) { animation: animate 1s .4s linear infinite; } .dot:nth-last-child(5) { animation: animate 1s .5s linear infinite; } @keyframes animate { 0 { transform: translate(0,0); } 50% { transform: translate(0,30px); } 100% { transform: translate(0,0); } }