Ring Spinner
An arc that grows, shrinks and turns at the same time – the classic material motion, in a few lines of SVG and CSS.
Spinners, waves, skeletons and shimmer. All of them announce themselves to screen readers and stand still for people who prefer reduced motion.
An arc that grows, shrinks and turns at the same time – the classic material motion, in a few lines of SVG and CSS.
Dots in a wave. Three motions, one rhythm – the delay is derived from the cycle so it stays musical at any speed.
Bars that rise and fall out of step, like audio levels. Delays are shuffled so the pattern never repeats visibly.
Holds the shape of a card while its content loads, so nothing jumps when it arrives. One soft shimmer across all blocks.
Planets on tilted orbits, each ring slower than the one inside it. Real 3D transforms, no canvas.
Rings breathe out from a point – for "live", "listening" or "searching nearby".
Drops that merge and split like liquid metal. An SVG blur plus a contrast matrix melts the circles together.
A band of light runs through the letters – the way AI tools say "working on it". Clipped gradient, no extra elements.
Indeterminate progress for the top of a page or card: two segments chasing each other at different paces.
A comet on a figure eight. The dash length and speed are free – short and fast feels busy, long and slow feels calm.
The chat bubble that says someone is writing. The label tells screen readers who.
A diagonal wave through a 3×3 grid. Square cells feel technical, round ones feel friendly – try the radius.