Material design loader

HTML
<div class="load"> <ul style="list-style-type:none"> <li></li> <li></li> <li></li> <li></li> </ul> </div>
CSS
body{ background-color: #E8EAF6; } .load li{ background-color:#3949AB; position:absolute; top:50%; left:45%; width:25px; height:25px; content:""; margin:10px 10px; border-radius:100%; transform:translate3d(0px,-30px,10px); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); animation: loading 1.50s ease-in-out infinite alternate; } .load li:nth-child(2){ background-color:#e74c3c; left:50%; animation: loading1 1.50s ease-in-out infinite alternate; animation-delay:0.4s; } .load li:nth-child(3){ background-color:#f1c40f; left:55%; animation: loading2 1.50s ease-in-out infinite alternate; animation-delay:0.8s; } .load li:nth-child(4){ background-color:#2ecc71; left:60%; animation: loading3 1.50s ease-in-out infinite alternate; animation-delay:1.2s; } @keyframes loading { to { transform:translate3d(0,30px,10px); box-shadow: 10px 10px 30px #3498db, 0 10px 20px #3498db ; } } @keyframes loading1{ to { transform:translate3d(0,30px,10px); box-shadow: 10px 10px 30px #bd081c, 0 10px 20px #bd081c; } } @keyframes loading2 { to { transform:translate3d(0,30px,10px); box-shadow: 10px 10px 30px #f39c12, 0 10px 20px #f39c12; } } @keyframes loading3 { to { transform:translate3d(0,30px,10px); box-shadow: 10px 10px 30px #27ae60, 0 10px 20px #27ae60; } }
JAVASCRIPT
Expand for more options Login