CSS Loaders Effects

The timeless rotating-border spinner, refined with a subtle base ring for depth.

Three colored dots that bounce in a staggered rhythm, perfect for inline status indicators.

Two concentric rings expand and fade in alternation, creating a sonar-like pulse.

A single square that rotates and morphs its border-radius in a hypnotic wave pattern.

Two stacked placeholder bars with a soft sweeping highlight that signals content is on its way.

A slim pill track with a colored segment that slides endlessly from left to right — perfect for progress feedback.

Three colored dots circle a central point at staggered phases, like electrons tracing an orbit.

Two counter-rotating waves slosh inside a circular vessel, creating a hypnotic liquid-fill illusion.

A purple hexagon (via clip-path) that flips on its Y axis while bouncing — geometric and modern.

A conic gradient masked into a thin ring that rotates — a more colorful alternative to the classic spinner.

Classic norm rotating ring spinner in blue.

Three bouncing dots in ocean colors with staggered timing.

A blue disc that pulses in size and emits an expanding ring.

Five-bar audio equalizer in ocean colors with staggered heights.

Two concentric rings spinning in opposite directions in ocean colors.

Thin ocean arc spinner — one element, drawn by a conic gradient and cut to a ring with a radial mask.

Five blue bars pumping out of phase — the compact "still working" indicator for inline use.

Three ocean dots swelling in sequence — the quietest loader that still reads as motion.

Conic ocean sweep punched into a ring by a radial mask — one element, no border tricks.

Three ocean satellites parked at 120-degree intervals and rotated as one group, so the ring keeps its spacing at any speed.

File row with a CSS-drawn dog-eared document and a bar that eases as it fills, so the last stretch reads slower the way a real transfer does.

Pipeline steps in monospace with completed ticks, one spinner on the running line, and pending steps dimmed rather than hidden.

Single dot traced around a lemniscate in eight keyframe stations, crossing at the waist so the two lobes read as one continuous circuit rather than two orbits.

Five pendulums where only the end pair moves and the middle three stay dead still, which is the whole illusion — momentum appears to pass through them.

A patterned ball rolls back and forth along a rail, squashing briefly each time it hits an end.

Row of upright bars that tip over one after another along a floor line, then stand back up to run again.

Two toothed wheels with hubs and bolt holes sit meshed at the rim and turn against each other, the smaller amber gear running faster in the opposite direction.

Determinate conic ring with the value printed in the middle in tabular figures, so the number does not jitter as it counts.

An oversized blob with a 42% radius spinning inside a circular clip, which turns a plain rotation into a rolling waterline.

Chat bubble with a clipped tail and three dots bobbing on a rolling delay, resting for most of the cycle so it does not read as frantic.

Four quadrants hinged at the shared centre corner, each folding in on X and out on Y a beat after the last so the square appears to turn itself inside out.

Three square tiles slide around a two-by-two grid, always leaving one empty slot like a sliding puzzle.

Three-by-three grid of tiles where a lit cell travels the outer ring, leaving a short glowing tail behind it.

Crank-slider engine in miniature: an amber flywheel turns a pin, the connecting rod swings and slides with it, and the piston strokes back and forth inside its cylinder.

Two rows of dots weave over and under each other in a sine wave like a rotating DNA helix.

Amber blocks fall one by one and squash on landing to build a small tower, which holds a beat and then clears to start again.

Framed abacus whose beads slide along three rails one at a time, queueing against the far post before the whole row runs back to be counted again.

A green radar scope with a rotating sweep beam that lights up two blips as it passes over them.

Twelve radial ticks around a circle, each fading out in turn so a bright head appears to sweep the dial.

A glowing packet runs the rectangular copper trace of a small board, turning each corner in sequence around the chip package sitting at the centre.

A gold coin with two different faces spins continuously around its vertical axis.

Concentric rings ripple outward from a glowing center dot and fade as they reach the edge.