Spinners, progress bars, skeleton screens and AI thinking states. Every loader below is pure CSS — no libraries, no JavaScript animation loop, and all of them respect prefers-reduced-motion.
Indeterminate
Rings, orbits, sectors and pinwheels — every one is a single element or a tiny loop, animated purely in CSS.
Ring
Dual ring
Gradient ring
SVG dash
Orbit
Sector
Clock spokes
Square trace
Flip card
Ripple
Pinwheel
Glow orb
Rhythm
Staggered delays turn three identical elements into a wave. The building block of typing indicators and equalisers.
Bouncing dots
Pulsing dots
Equaliser
Waveform
Bouncing balls
Typing bubble
Status pulse
Dot grid
Comet trail
Heartbeat
Determinate
Bars, rings, dials and step trackers — for when you actually know how far along you are.
Live bar
Circular
Indeterminate
Striped
Segmented
Steps
Glow bar
Radial dial
Top loading bar
Battery
Placeholders
Shimmer sweeps that mirror the shape of the content underneath, so the layout never jumps when data lands.
Text lines
Avatar row
Card
Table rows
Pulse block
Chart placeholder
Feed post
Wave sweep
Modern
Streaming text, tool-call traces, generating cards and full-page loaders for AI-native products.
Streaming text
Thinking about your request…
Thinking shimmer
Tool call trace
Generating card
Loading workspace…
Full-page loader
Logo pulse
Counter roll
Fetching results…
Empty → loading