Skeleton
Spinner
Skeleton vs. Spinner
/ aria-busy="true" · Skeleton /
also called skeleton screen, placeholder loader, loading spinner, throbber
A skeleton previews the geometry of content that has not arrived, reducing layout shift and making a predictable page feel faster. A spinner communicates an indeterminate wait when the eventual shape is unknown or the operation is detached from a specific layout. Neither should remain after the result or error state is available.
Anatomy — every part, named
- 1Skeleton block
Skeleton“The grey shape standing in for a card or image” is a skeleton block.
- 2Skeleton text line
Skeleton“The fake grey line where text will appear” is a skeleton text line.
- 3Shimmer sweep
@keyframes“The little glow moving across the placeholder” is the shimmer sweep.
- 4Spinner track and arc
role="status"“The faint circle and the darker bit spinning around it” are the spinner track and active arc.
Prompt — paste into your agent
Mark the loading region aria-busy="true" and use a skeleton when the final card layout is known, preserving its geometry while data arrives. Use a spinner with role="status" when the wait has no meaningful content shape, and replace either indicator when loading completes.
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| ARIA | aria-busy="true" | |
| shadcn/ui | Skeleton | |
| ARIA | role="status" |