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:

Tags