Conic Gradient Spinner
conic-gradientと@propertyで回転角度をアニメーションする高度なスピナー。
HTML
<div class="cgs-spinner"></div>
CSS
@property --cgs-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.cgs-spinner {
width: 56px;
height: 56px;
border-radius: 50%;
background: conic-gradient(from var(--cgs-angle), transparent, #6366f1 40%, transparent 60%);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
animation: cgs-rotate 1.2s linear infinite;
}
@keyframes cgs-rotate {
to { --cgs-angle: 360deg; }
}