A loading spinner in 8 lines of CSS with conic-gradient, radial-gradient, and keyframe animations.
There may be better or more concise ways to do this, but I like the simplicity and it works.
The CSS:
button::after {
animation: spin 1s infinite linear;
background-image:
radial-gradient(white, white 50%, transparent 50%),
conic-gradient(white 1deg 270deg, transparent 270deg);
block-size: 1.125rem;
border-radius: 50%;
content: '';
inline-size: 1.125rem;
}
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(1turn); }
}
Press the button to see it in action: