SCSS
body, html {
height: 100%;
background: #F6F4EE;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.circle {
width: 40px;
height: 40px;
background: red;
border-radius: 50%;
offset-path: path("M0,0a72.5,72.5 0 1,0 145,0a72.5,72.5 0 1,0 -145,0");
offset-rotate: 0deg;
position: relative;
transform: scale(1.5);
}
.circle-1 {
width: 30px;
height: 30px;
background: #814AB1;
}
.circle-2 {
width: 25px;
height: 25px;
background: #4CBDC9;
left: -30px;
}
.circle-3 {
width: 20px;
height: 20px;
background: #FFCE24;
left: -55px;
}
.circle-4 {
width: 15px;
height: 15px;
background: #FF2D74;
left: -75px;
}
@for $i from 1 through 4 {
.circle-#{$i} {
animation: load 1.8s cubic-bezier(0.860, 0.000, 0.070, 1.000) infinite;
animation-delay: 0.147s * $i;
animation-fill-mode: forwards;
z-index: 100 - $i;
}
}
@keyframes load {
from {
offset-distance: 0;
}
to {
offset-distance: 100%;
}
}
