<svg viewBox="0 0 5 5" width="100">
<circle cx="2.5" cy="2.5" r="2" />
</svg>
circle{
fill: none;
stroke: #000;
stroke-width: 0.3;
stroke-linecap: round;
animation: round 3s linear infinite forwards;
transform-origin: center;
}
@keyframes round{
0%{
stroke-dasharray: 0.3 0.9 0.3 0.6;
transform: rotate(0deg)
}
100%{
stroke-dasharray: 0.9 0.9 0.9 0.9 4.4;
transform: rotate(360deg)
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.