CSS Spinner Collection

A collection of eight lightweight loading spinners written in pure CSS, with no JavaScript and no images. They are shown in a labelled dark grid so you can pick one and copy only the markup and rules you need for buttons, cards, page loaders or data tables.

How it works

The root section.sp-collection holds a heading and a ul.sp-grid of .sp-item tiles. Each tile contains one .sp-spinner element and a .sp-label caption. Every spinner is a square box sized by --sp-size, and a second class picks its style:

1. .sp-ring: a border circle with one colored segment that rotates.
2. .sp-dual: two arcs, the inner one drawn with ::after and turning in reverse.
3. .sp-dots: three .sp-dot elements bouncing one after another.
4. .sp-bars: four .sp-bar elements stretching like an equalizer.
5. .sp-pulse: two expanding circles from ::before and ::after.
6. .sp-orbit: a .sp-planet dot circling a core on a dashed track.
7. .sp-square: a gradient tile flipping in 3D.
8. .sp-fade: eight .sp-petal bars arranged in a circle that fade in sequence.

All animation timings are multiples of --sp-speed, and staggered delays use calc() with the same variable, so one value speeds up or slows down the whole set while keeping each spinner's rhythm. Only transform and opacity are animated, which keeps them smooth on low-end devices.

Customization

• --sp-color on .sp-collection: the main spinner color, used by every style.
• --sp-color-2: the secondary color for the inner dual ring, the middle dot, the orbit core and the gradients.
• --sp-size: changes the size of all spinners, e.g. 24px for a spinner inside a button.
• --sp-speed: base duration; 0.6s feels urgent, 1.5s feels calm.
• --sp-track: color of the faint track behind .sp-ring and the orbit path.
• --sp-bg, --sp-card and --sp-text: the panel, tile and label colors, for example a light theme.
• Change the text inside .sp-sr to describe what is loading, such as "Loading comments".

Accessibility

Every spinner has role="status", which is a polite live region, and contains a .sp-sr span with "Loading…". That text is hidden visually but read by screen readers, so the spinner is announced without extra ARIA. The visible .sp-label captions only name the style in this demo and can be removed. With prefers-reduced-motion: reduce the animations are not removed, because a frozen spinner looks like a broken page; instead --sp-speed becomes 3s, so the motion is three times slower and less distracting.

Usage notes

To use a single spinner elsewhere, copy the .sp-spinner element, the shared .sp-spinner and .sp-sr rules, its own rules and keyframes, and declare the custom properties on a parent or on the spinner itself. Remove the spinner or set hidden on it when loading finishes.