Loaders.

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.

48 componentsHover to copyPure CSSReduced-motion safe

Buttons Inputs Badges & Chips Cards Forms Loaders Navigation Overlay Feedback Data Display Text Effects Backgrounds Effects Hero Sections Landing Blog & Content Layout Dashboard AI Interfaces E-commerce Auth Settings

Indeterminate

Spinners

Rings, orbits, sectors and pinwheels — every one is a single element or a tiny loop, animated purely in CSS.

12 variants

Ring

tsx

Dual ring

tsx

Gradient ring

tsx

SVG dash

tsx

Orbit

tsx

Sector

tsx

Clock spokes

tsx

Square trace

tsx

Flip card

tsx

Ripple

tsx

Pinwheel

tsx

Glow orb

tsx

Rhythm

Dots, bars & pulses

Staggered delays turn three identical elements into a wave. The building block of typing indicators and equalisers.

10 variants

Bouncing dots

tsx

Pulsing dots

tsx

Equaliser

tsx

Waveform

tsx

Bouncing balls

tsx

Typing bubble

tsx

All systems normal

Status pulse

tsx

Dot grid

tsx

Comet trail

tsx

♥

Heartbeat

tsx

Determinate

Progress

Bars, rings, dials and step trackers — for when you actually know how far along you are.

10 variants

Uploading…12%

Stateful

Live bar

tsx

Stateful

Circular

tsx

Indeterminate

tsx

Striped

tsx

Segmented

tsx

✓

Steps

tsx

Glow bar

tsx

70%

Radial dial

tsx

Route loading…

Top loading bar

tsx

Battery

tsx

Placeholders

Skeleton screens

Shimmer sweeps that mirror the shape of the content underneath, so the layout never jumps when data lands.

8 variants

Text lines

tsx

Avatar row

tsx

Card

tsx

Table rows

tsx

Pulse block

tsx

Chart placeholder

tsx

Feed post

tsx

Wave sweep

tsx

Modern

AI & page states

Streaming text, tool-call traces, generating cards and full-page loaders for AI-native products.

8 variants

Stateful

Streaming text

tsx

Thinking about your request…

Thinking shimmer

tsx

✓read_file

✓search_repo

write_file

Tool call trace

tsx

✦Generating UI

Generating card

tsx

Loading workspace…

Full-page loader

tsx

Logo pulse

tsx

1,284indexed

Counter roll

tsx

Fetching results…

Empty → loading

tsx

Loaders.

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.

48 componentsHover to copyPure CSSReduced-motion safe

Indeterminate

Spinners

Rings, orbits, sectors and pinwheels — every one is a single element or a tiny loop, animated purely in CSS.

12 variants

Ring

tsx

Dual ring

tsx

Gradient ring

tsx

SVG dash

tsx

Orbit

tsx

Sector

tsx

Clock spokes

tsx

Square trace

tsx

Flip card

tsx

Ripple

tsx

Pinwheel

tsx

Glow orb

tsx

Rhythm

Dots, bars & pulses

Staggered delays turn three identical elements into a wave. The building block of typing indicators and equalisers.

10 variants

Bouncing dots

tsx

Pulsing dots

tsx

Equaliser

tsx

Waveform

tsx

Bouncing balls

tsx

Typing bubble

tsx

All systems normal

Status pulse

tsx

Dot grid

tsx

Comet trail

tsx

♥

Heartbeat

tsx

Determinate

Progress

Bars, rings, dials and step trackers — for when you actually know how far along you are.

10 variants

Uploading…12%

Stateful

Live bar

tsx

Stateful

Circular

tsx

Indeterminate

tsx

Striped

tsx

Segmented

tsx

✓

Steps

tsx

Glow bar

tsx

70%

Radial dial

tsx

Route loading…

Top loading bar

tsx

Battery

tsx

Placeholders

Skeleton screens

Shimmer sweeps that mirror the shape of the content underneath, so the layout never jumps when data lands.

8 variants

Text lines

tsx

Avatar row

tsx

Card

tsx

Table rows

tsx

Pulse block

tsx

Chart placeholder

tsx

Feed post

tsx

Wave sweep

tsx

Modern

AI & page states

Streaming text, tool-call traces, generating cards and full-page loaders for AI-native products.

8 variants

Stateful

Streaming text

tsx

Thinking about your request…

Thinking shimmer

tsx

✓read_file

✓search_repo

write_file

Tool call trace

tsx

✦Generating UI

Generating card

tsx

Loading workspace…

Full-page loader

tsx

Logo pulse

tsx

1,284indexed

Counter roll

tsx

Fetching results…

Empty → loading

tsx