SVG Gear Spinner
2つのSVG歯車が噛み合って回転するメカニカルなローダー。
HTML
<svg class="sgs-svg" width="80" height="80" viewBox="0 0 80 80">
<g class="sgs-g1" transform="translate(28,40)">
<circle cx="0" cy="0" r="10" fill="none" stroke="#6366f1" stroke-width="2"></circle>
<circle cx="0" cy="-13" r="3" fill="#6366f1"></circle>
<circle cx="11.3" cy="6.5" r="3" fill="#6366f1"></circle>
<circle cx="-11.3" cy="6.5" r="3" fill="#6366f1"></circle>
</g>
<g class="sgs-g2" transform="translate(52,40)">
<circle cx="0" cy="0" r="7" fill="none" stroke="#a855f7" stroke-width="2"></circle>
<circle cx="0" cy="-10" r="2.5" fill="#a855f7"></circle>
<circle cx="8.7" cy="5" r="2.5" fill="#a855f7"></circle>
<circle cx="-8.7" cy="5" r="2.5" fill="#a855f7"></circle>
</g>
</svg>
CSS
.sgs-svg { display: block; }
.sgs-g1 {
transform-origin: 28px 40px;
animation: sgs-spin 2s linear infinite;
}
.sgs-g2 {
transform-origin: 52px 40px;
animation: sgs-spin 2s linear infinite reverse;
}
@keyframes sgs-spin {
to { transform: rotate(360deg); }
}