Result
html
css
Result
html
<div >
<svg class="spinner" viewBox="0 0 500 500">
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="15" d="M50 128l190-78.1M240 430l190-78M240 49.9L430 128M50 352l190 78M50 128v224M430 128v224M50 128l380 224M240 49.9V430"/>
<path fill="none" d="M50 352l380-224"/>
<path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="15" d="M240 49.9L430 352M50 352L240 49.9"/>
<circle cx="50" cy="352" r="37" fill="#fff"/>
<circle class="circle-1" cx="50" cy="352" r="37" fill="#205081"/>
<path d="M50 317c19.3 0 35 15.7 35 35s-15.7 35-35 35-35-15.7-35-35 15.7-35 35-35m0-15c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50z"/>
<circle cx="50" cy="128" r="42.5" fill="#fff"/>
<circle class="circle-2" cx="50" cy="128" r="42.5" fill="#ef4454"/>
<path d="M50 93c19.3 0 35 15.7 35 35s-15.7 35-35 35-35-15.7-35-35 15.7-35 35-35m0-15c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50z"/>
<circle cx="240" cy="49.9" r="42.5" fill="#fff"/>
<circle class="circle-3" cx="240" cy="49.9" r="42.5" fill="#00b261"/>
<path d="M240 14.9c19.3 0 35 15.7 35 35s-15.7 35-35 35-35-15.7-35-35 15.7-35 35-35m0-15c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50z"/>
<circle cx="430" cy="128" r="42.5" fill="#fff"/>
<circle class="circle-4" cx="430" cy="128" r="42.5" fill="#ef4454"/>
<path d="M430 93c19.3 0 35 15.7 35 35s-15.7 35-35 35-35-15.7-35-35 15.7-35 35-35m0-15c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50z"/>
<circle cx="430" cy="352" r="42.5" fill="#fff"/>
<circle class="circle-5" cx="430" cy="352" r="42.5" fill="#ffde7b"/>
<path d="M430 317c19.3 0 35 15.7 35 35s-15.7 35-35 35-35-15.7-35-35 15.7-35 35-35m0-15c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50z"/>
<circle cx="240" cy="430" r="42.5" fill="#fff"/>
<circle class="circle-6" cx="240" cy="430" r="42.5" fill="#00b261"/>
<path d="M240 395c19.3 0 35 15.7 35 35s-15.7 35-35 35-35-15.7-35-35 15.7-35 35-35m0-15c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50z"/>
<circle cx="240" cy="240" r="42.5" fill="#fff"/>
<path d="M240 205c19.3 0 35 15.7 35 35s-15.7 35-35 35-35-15.7-35-35 15.7-35 35-35m0-15c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50z"/>
</svg>
</div>
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;
}