Result
html
css
Result
html
css
@keyframes circle-1 {
0% {transform: scale(1);}
8.33% {transform: scale(.1);}
100% {transform: scale(1);}
}
@keyframes circle-2 {
0% {transform: scale(1);}
24.99% {transform: scale(.1);}
100% {transform: scale(1);}
}
@keyframes circle-3 {
0% {transform: scale(1);}
41.65% {transform: scale(.1);}
100% {transform: scale(1);}
}
@keyframes circle-4 {
0% {transform: scale(1);}
58.33% {transform: scale(.1);}
100% {transform: scale(1);}
}
@keyframes circle-5 {
0% {transform: scale(1);}
80% {transform: scale(.1);}
100% {transform: scale(1);}
}
@keyframes circle-6 {
0% {transform: scale(1);}
91.65% {transform: scale(.1);}
100% {transform: scale(1);}
}
.circle-1, .circle-2, .circle-3, .circle-4, .circle-5, .circle-6 {
transform-box: fill-box;
transform-origin: center;
}
.circle-1 {
animation: circle-1 2s linear infinite;
}
.circle-2 {
animation: circle-2 2s linear infinite;
}
.circle-3 {
animation: circle-3 2s linear infinite;
}
.circle-4 {
animation: circle-4 2s linear infinite;
}
.circle-5 {
animation: circle-5 2s linear infinite;
}
.circle-6 {
animation: circle-6 2s linear infinite;
}
.spinner {
overflow: visible;
width: 300px;
}