presentation form · Structural containers and states
Skeleton Loader
A placeholder animation that shows the approximate shape of content before it loads — skeleton blocks for predictable layouts, spinners for indeterminate waits.
Decisive boundary
A skeleton suggests a known layout shape; a spinner signals an unknown duration. Choose based on whether you can predict the content structure.
Definition and intent
What is a Skeleton Loader UI pattern?
Use the behavior, not the silhouette
A placeholder animation that shows the approximate shape of content before it loads — skeleton blocks for predictable layouts, spinners for indeterminate waits. The term is used here as a presentation form that describes placement or motion without deciding every semantic behavior. That distinction prevents a visual resemblance from silently deciding focus, keyboard, modality, or dismissal behavior.
Reassure users that content is on the way and reduce perceived wait time. A good implementation preserves that job while making the trigger, open state, close path, and responsive behavior observable to users.
Know when the label is wrong
The fastest way to identify a pattern is often to reject the nearest alternative. For Skeleton Loader, the boundary is: A skeleton suggests a known layout shape; a spinner signals an unknown duration. Choose based on whether you can predict the content structure.
Do not implement it as Empty State for the period after an error, and Progress Bar for a measurable percentage. If those requirements describe the real task better, use the related pattern page or the full Structural containers and states comparison before writing code.
Decision process
Decide before choosing a component
Record these requirements in plain language. A library component name is not a substitute for the contract.
Confirm the user job
Reassure users that content is on the way and reduce perceived wait time.
Define opening and closing
Appears while content is loading or a data fetch is in progress. Replaced by actual content or an error state when loading completes or fails.
Specify access behavior
Hidden from focus order when it contains no interactive controls; live-region announces loading state. No keyboard interaction during loading; any action buttons appear after loading completes.
Reject the near miss
Empty State for the period after an error, and Progress Bar for a measurable percentage.
Behavior contract
What must survive the build
- trigger
- Appears while content is loading or a data fetch is in progress.
- dismissal
- Replaced by actual content or an error state when loading completes or fails.
- modality
- Non-modal inline presentation.
- focus
- Hidden from focus order when it contains no interactive controls; live-region announces loading state.
- keyboard
- No keyboard interaction during loading; any action buttons appear after loading completes.
- interactive
- Not interactive during loading; may show a cancel button when loading is user-initiated.
- persistence
- Temporary — exists only for the duration of the loading period.
- placement
- Occupies the same layout space as the content it represents.
- mobile
- Animate with caution; respect prefers-reduced-motion and avoid layout shift when content replaces the placeholder.
Failure modes
Common wrong builds
- Animating the skeleton when prefers-reduced-motion is set.
- Using a spinner for every loading period regardless of duration.
- Causing layout shift when content replaces the placeholder.
- Omitting an accessible label or status announcement for the loading region.
Observable checks
Verify the result
- The loading region is announced to assistive technology.
- Animation respects prefers-reduced-motion.
- Content replaces the placeholder without layout shift.
- Loading state is temporary.
- A timeout or error escape path exists.
Coding-agent handoff
Implementation brief template
Pattern: Skeleton Loader Purpose: Reassure users that content is on the way and reduce perceived wait time. Trigger: Appears while content is loading or a data fetch is in progress. Dismissal behavior: Replaced by actual content or an error state when loading completes or fails. Modality: Non-modal inline presentation. Focus behavior: Hidden from focus order when it contains no interactive controls; live-region announces loading state. Keyboard behavior: No keyboard interaction during loading; any action buttons appear after loading completes. Interactive content: Not interactive during loading; may show a cancel button when loading is user-initiated. Placement: Occupies the same layout space as the content it represents. Mobile behavior: Animate with caution; respect prefers-reduced-motion and avoid layout shift when content replaces the placeholder. Do not implement as: Empty State for the period after an error, and Progress Bar for a measurable percentage. Acceptance checks: - The loading region is announced to assistive technology. - Animation respects prefers-reduced-motion. - Content replaces the placeholder without layout shift. - Loading state is temporary. - A timeout or error escape path exists.
Claim-level references
Sources, not a confidence score
Frequently asked questions
Skeleton Loader UI pattern questions
Direct answers based on the reviewed behavior contract above.
What is a Skeleton Loader in web UI?
A placeholder animation that shows the approximate shape of content before it loads — skeleton blocks for predictable layouts, spinners for indeterminate waits. In this reference set it is a presentation form that describes placement or motion without deciding every semantic behavior.
When should I use a Skeleton Loader?
Reassure users that content is on the way and reduce perceived wait time. The decisive boundary to confirm is this: A skeleton suggests a known layout shape; a spinner signals an unknown duration. Choose based on whether you can predict the content structure.
What keyboard and focus behavior does a Skeleton Loader need?
No keyboard interaction during loading; any action buttons appear after loading completes. Hidden from focus order when it contains no interactive controls; live-region announces loading state. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.
How should a Skeleton Loader behave on mobile?
Animate with caution; respect prefers-reduced-motion and avoid layout shift when content replaces the placeholder. Its modality is a separate requirement: Non-modal inline presentation.
How do I verify a Skeleton Loader implementation?
Start with observable checks: The loading region is announced to assistive technology. Animation respects prefers-reduced-motion. Content replaces the placeholder without layout shift. Then verify the remaining checks and compare the result with the linked source guidance.