<div class="loading">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: black;
}
.circle {
$circle-count: 60;
$circle-diameter: 0.5em;
$ring-radius: 4em;
$duration: 3s;
position: absolute;
width: $circle-diameter;
height: $circle-diameter;
border-radius: 50%;
background: white;
opacity: 0;
animation: move-to-center $duration ease-in-out infinite;
@for $i from 1 through $circle-count {
&:nth-child(#{$i}) {
$ratio: $i / $circle-count;
// Make a ring of circles, and move them to center;
transform: rotate($ratio * 720deg) translateX($ring-radius);
// Then stagger the animation, and it becomes a spiral.
animation-delay: $ratio * $duration;
}
}
}
@keyframes move-to-center {
to {
opacity: 1;
transform: translate(0, 0);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.