Dots Loader

HTML
<div class="wrapper"> <div class="outer outer-1"> <div class="dot"></div> </div> <div class="outer outer-2"> <div class="dot"></div> </div> <div class="outer outer-3"> <div class="dot"></div> </div> </div>
CSS
* { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: #141E30; background: linear-gradient(to left, #141E30 , #243B55); height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .wrapper { position: relative; } .outer { display: block; float: left; width: 60px; position: absolute; } .outer-1 { left: -40px; animation: bouncy1 1.5s infinite; } .outer-2 { animation: bouncy2 1.5s infinite; left: 0; } .outer-3 { animation: bouncy3 1.5s infinite; left: 40px; } .dot { height: 20px; width: 20px; border-radius: 50%; background: #bdc3c7; } @keyframes bouncy1 { 0% {transform: translate(0px,0px) rotate(0deg);} 50% {transform: translate(0px,0px) rotate(180deg);} 100% {transform: translate(40px,0px) rotate(-180deg);} } @keyframes bouncy2 { 0% {transform: translateX(0px);} 50% {transform: translateX(-40px);} 100% {transform: translateX(-40px);} } @keyframes bouncy3 { 0% {transform: translateX(0px);} 50% {transform: translateX(0px);} 100% {transform: translateX(-40px);} }
JAVASCRIPT
Expand for more options Login