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; }
}
