Market

A small mark plus a shimmering status line that rotates through messages and shows elapsed seconds once the wait passes two. Four marks: spark, orb, dots and sweep bar. For AI chats and any long-running generation.

CSSSVG

Five bar-based waiting animations: equalizer, wave, center-out voice, signal steps and a sweeping line. Count, thickness, color and speed are shared, for transcription, uploads, voice and any processing state.

CSS

Five dot rhythms: pulse, wave, bounce, typing and ellipsis, sharing count, spacing, color and speed. Made for chat typing indicators, buttons that are processing and load-more footers.

CSS

Five circular waiting animations: stretching arc, chasing dots, fading ticks, orbiting pair and pulsing ripples. One set of size, color, thickness and speed controls, an optional show delay, a screen-reader label, and a slow breathing fallback for reduced motion.

CSSSVG

A band of light sweeps across the text to say "thinking" or "generating". Switch to a per-letter wave or a whole-line pulse. For AI chats, step logs and any wait that deserves one honest sentence.

CSS

Several goals as concentric rings, each sweeping to its completion on a spring; a ring past 100% runs a second lap with a shadow at its tip. Hover or focus a legend row to light up one ring and show its percentage in the middle. For habit trackers, daily goals and team targets.

MotionSVG

A determinate progress bar: the fill glides on a spring with the number in step, in gradient, striped, segmented or glowing styles. Leave value empty for an indeterminate sweep. Full progressbar semantics included.

MotionCSS

A gradient-stroked ring whose arc and center number ride one spring. Full ring, 270-degree gauge or tick dial, with optional glow. For goals, storage usage and scores.

MotionSVG

A pill drops in from the top, then stretches like a drop of water into a body with a description and an action, and folds back before leaving. The outline is a morphing SVG path on an overshooting spring. For success, failure and update notices that need one line and one action.

MotionSVG

A checkmark that draws itself: the ring strokes in, the tick lands with a small pop, then a ripple and sparks burst out. Four forms: ring, burst, solid stamp and twelve-lobe seal. For completed payments, saved changes and finished tasks.

SVG

Sonner-style stacking toasts: cards tuck behind the newest one, expand into a list on hover and pause their timers, and swipe away. Supports loading-to-success updates in place, action buttons, six positions and screen-reader announcements.

MotionCSS