Pure CSS loading spinner

A lightweight, dependency-free loading spinner with adjustable size, thickness, color and speed.

spinner
loader
animation
loading

Size48px

Thickness5px

Color#6b46ff

Speed0.8s

HTML

<div class="spinner"></div>

CSS

:root {
    --size: 48px;
    --thickness: 5px;
    --color: #6b46ff;
    --speed: 0.8s;
}

.spinner {
    width: var(--size);
    height: var(--size);
    border: var(--thickness) solid
        color-mix(in srgb, var(--color) 22%, transparent);
    border-top-color: var(--color);
    border-radius: 50%;
    animation: spin var(--speed) linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

How it works

A single element with a circular border does all the work:

The full border is a faint tint of the main color (via color-mix).
border-top-color paints just the top segment in the solid color, so the ring looks partial.
border-radius: 50% turns the box into a circle, and the spin keyframes rotate it forever.

No SVG, no images, no JavaScript — and it respects the current --color so you can theme it with one variable.