CSS Skype loader

HTML
=<div id="center"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/skype-logo.png" width="150" alt=""> <div class="skype-loader"> <div class="dot"> <div class="first"></div> </div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> Logging in... </div>
SCSS
@import url('https://fonts.googleapis.com/css?family=Quicksand:300'); body { background-color: #02aff1; } #center { position: absolute; top: 50%; left: 50%; margin-top: -180px; margin-left: -75px; width: 150px; height: 80px; font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 19px; color: #fff; text-align: center; -webkit-font-smoothing: antialiased; } .skype-loader { width: 80px; height: 80px; position: relative; margin: auto; margin-top: 60px; margin-bottom: 70px; } .skype-loader .dot { position: absolute; top: 0; left: 0; width: 80px; height: 80px; animation: 1.7s dotrotate cubic-bezier(0.775, 0.005, 0.310, 1.000) infinite; } .skype-loader .dot:nth-child(1) { animation-delay: 0.2s; } .skype-loader .dot:nth-child(2) { animation-delay: 0.35s; } .skype-loader .dot:nth-child(3) { animation-delay: 0.45s; } .skype-loader .dot:nth-child(4) { animation-delay: 0.55s; } .skype-loader .dot:after, .skype-loader .dot .first { content: ""; position: absolute; width: 8px; height: 8px; background: white; border-radius: 50%; left: 50%; margin-left: -4px; } .skype-loader .dot .first { background: #fff; margin-top: -4px; animation: 1.7s dotscale cubic-bezier(0.775, 0.005, 0.310, 1.000) infinite; animation-delay: 0.2s; } @keyframes dotrotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes dotscale { 0%, 10% { width: 16px; height: 16px; margin-left: -8px; margin-top: -4px; } 50% { width: 8px; height: 8px; margin-left: -4px; margin-top: 0; } 90%, 100% { width: 16px; height: 16px; margin-left: -8px; margin-top: -4px; } }
JAVASCRIPT
Expand for more options Login