Loader

Loading indicators for async operations: spinners for indeterminate waits, skeleton placeholders for content layout, and progress rings for determinate uploads.

Preview — Spinners in 3 Sizes

Loading reports...

lg (inline)

Preview — Skeleton Card + Progress Ring

64%

Uploading photo...

Variants

Spinner

Indeterminate loading — used when duration is unknown.

Skeleton Text

Skeleton Card

Skeleton Image

Progress Ring

25%

50%

75%

100%

States

Variant	Aria Role	Reduced Motion
Spinner	`role="status"`	Switches to `animate-pulse`
Skeleton text	`aria-busy="true"`	Static grey blocks
Skeleton card	`aria-busy="true"`	Static grey blocks
Skeleton image	`aria-busy="true"`	Static grey block
Progress ring	Percentage text	Static ring, no transition

Accessibility

Spinners use role="status" with a descriptive aria-label.
Skeleton placeholders use aria-busy="true" to indicate loading content.
Progress ring shows percentage as visible text and is read by screen readers.
Full-screen overlay spinner traps focus and announces the loading message.
All animations respect prefers-reduced-motion via motion-reduce: classes.

Trauma-Informed Design

Loading indicators prevent the "is it working?" anxiety — especially critical on slow connections.
Skeleton cards show the expected layout shape, preparing the user for what is coming.
Progress rings with percentage give concrete feedback during photo uploads over slow networks.
The full-screen overlay (lg spinner with message) is used sparingly — only for critical waits like form submission.