Anatomy

A loader includes a container (A), spinner or indicator (B), and optional helper text (C). A shimmer includes a placeholder container and animated fill matching content layout.

Use for loading

Use loaders or shimmers to indicate that content is being fetched or processed.

When to use shimmers

Use shimmers when the layout is consistent and content structure is known.

Use templates

Use prebuilt shimmer templates for known UI patterns — avoid building one-off shimmer states.

When to use spinners

Use loaders (like spinners) when content is lightweight or structure is unknown.

Transitions

Ensure a clean switch from loading state to content without visual jumps.