SCSS
$n-rings: 100;
$n-dots: 14;
$dot-diam: 4px;
$t: 4s;
$nc: floor($n-rings*.25);
$ring-r: ($n-dots - 2)*$dot-diam;
$ring-ba: 360deg/$n-rings;
$pos-r: 3.25*$ring-r;
$dot-ba: 360deg/$n-dots;
@function c($i) { @return hsl($i*360/$nc, 100%, 60%); }
body {
overflow: hidden;
height: 100vh;
perspective: 400px;
background: #222;
}
div {
position: absolute;
transform-style: preserve-3d;
}
.wrapper { top: 50%; left: 50%; }
@for $i from 0 to $n-rings {
.ring:nth-child(#{$i + 1}) {
transform: rotate($i*$ring-ba) translate($pos-r);
.dot:nth-child(odd) { color: c($i); }
.dot:nth-child(even) { color: c($i + 1); }
.rotor, .dot:before {
animation-delay: -$i*$t/$n-rings;
}
}
}
.rotor, .dot:before {
animation: r $t linear infinite;
}
.dot {
@for $i from 0 to $n-dots {
$dot-ca: $i*$dot-ba; // current angle
&:nth-child(#{$i + 1}) {
transform: rotateY($dot-ca)
translateZ($ring-r)
rotateY(-$dot-ca);
}
}
&:before {
position: absolute;
margin: -.5*$dot-diam;
width: $dot-diam; height: $dot-diam;
border-radius: 50%;
background: currentColor;
animation-direction: reverse;
content: '';
}
}
@keyframes r { to { transform: rotateY(1turn); } }
1 Response