Google Loading Animation

HTML
<div class="dots"> <div class="dots__blue"></div> <div class="dots__red"></div> <div class="dots__yellow"></div> <div class="dots__green"></div> </div>
CSS
* { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #222; } .dots { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20%; } .dots div { width: 20px; height: 20px; border: 0px solid transparent; border-radius: 50%; display: inline-block; margin: 10px; } .dots__blue { background-color: #48929B; animation: 2s up-down ease infinite; } .dots__red { background-color: #C3272B; animation: 2s up-down ease infinite; animation-delay: .25s; } .dots__yellow { background-color: goldenrod; animation: 2s up-down ease infinite; animation-delay: .5s; } .dots__green { background-color: #049372; animation: 2s up-down ease infinite; animation-delay: .75s; } @keyframes up-down { 50% { transform: translateY(-25px); } }
JAVASCRIPT
Expand for more options Login