SCSS
body {
animation: bgcolor 10s linear infinite;
}
.centered {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.box {
width: 635px;
height: 143px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
.circle {
width: 25px;
height: 25px;
//box-shadow: 0 0 0 1px rgba($color-default, .2) inset;
border-radius: 50%;
margin-left: -12px;
margin-top: -12px;
position: relative;
animation: rotate 1s linear infinite;
&:after, &:before {
position: absolute;
width: 10px;
height: 1px;
content: "";
border-radius: 50%;
left: 0;
right: 0;
margin: auto;
}
&:after {
top: -1px;
background-color: #fff;
}
&:before {
top: 5px;
background-color: rgba(0, 0, 0, .1);
}
}
@for $i from 1 through 550 {
.circle:nth-child(#{$i}) {
animation-delay: $i * 0.003s;
}
}
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
@keyframes bgcolor {
0%{
background-color: #b6eb8a;
}33%{
background-color: #91e3d8;
}66%{
background-color: #9ab2ed;
}100%{
background-color: #b6eb8a;
}
}
