SCSS
$n: 9;
$d: 2em;
$b: .375em;
html {
overflow: hidden;
height: 100%;
width: 100%;
}
body {
background: #e96443;
background: -webkit-linear-gradient(to left, #e96443 , #904e95);
background: linear-gradient(to left, #e96443 , #904e95);
}
.ring {
position: absolute;
top: 50%; left: 50%;
border: solid 0;
border-color: #f39c12 transparent;
border-width: $b $b 0 0;
border-radius: 50%;
animation: r 0s linear infinite;
@for $i from 0 to $n {
$d: $d + 3em;
&:nth-child(#{$i + 1}) {
margin: -.5*$d;
width: $d; height: $d;
animation-duration: 6.3s/($n - $i);
}
}
}
@keyframes r { to { transform: rotate(1turn); } }
