SCSS
$bg: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
$dot-color: #fff;
$circles: 9;
$dot-size: 20px;
$minDotCount: 4;
$minCircleSize: $dot-size*($minDotCount - 1);
$_2pi: 2*pi();
@mixin animation ($name) {
@-webkit-keyframes #{$name} {@content;}
@-moz-keyframes #{$name} {@content;}
@-o-keyframes #{$name} {@content;}
@keyframes #{$name} {@content;}
}
@mixin animation-use ($name, $time) {
-webkit-animation: $name $time infinite linear;
-moz-animation: $name $time infinite linear;
-o-animation: $name $time infinite linear;
animation: $name $time infinite linear;
}
.round {
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
}
html, body {
height: 100%;
width: 100%;
}
body {
background: $bg;
overflow: hidden;
.circle {
@extend .round;
&:after {
@extend .round;
content: '';
width: $dot-size;
height: $dot-size;
margin: -$dot-size/2 0 -$dot-size/2;
}
@for $i from 0 to $circles {
@include animation (spin + ($i + 1)) {
to {
-webkit-transform: rotate(($circles - $i) + turn);
-ms-transform: rotate(($circles - $i) + turn);
transform: rotate(($circles - $i) + turn);
}
}
&:nth-child(#{$i + 1}) {
$size: $minCircleSize + 3.5*$i*$dot-size;
width: $size;
height: $size;
margin: -$size/2 0 -$size/2;
@include animation-use(spin + ($i + 1), ($circles - 1)*($i + 1) + s);
&:after {
$b-s: ();
@for $j from 1 through $minDotCount*($i + 1) {
$x: $size/2*cos($j*$_2pi/($minDotCount*($i + 1)));
$y: $size/2*sin($j*$_2pi/($minDotCount*($i + 1)));
$b-s: append($b-s, $x $y $dot-color, comma);
}
box-shadow: $b-s;
}
}
}
}
}
