For further information, consult the pattern: Loading.
Anatomy
- Skeleton shapes: Different simple shapes representing different types of content
Usage Guidelines
When to use this component
- For loading whole pages or complex components content
- When the loading times are between 1 and 10 seconds
- In dynamic content that has a predictable structure (tables, cards, lists)
- Use when you know the layout and structure of content ahead of time
-
For progressive content loading where lighter content loads first followed by heavier elements
When not to use this component
- In static content like buttons, labels, or navigation elements that don't change
- Don't use when content structure is unpredictable or unknown
- If loading time exceeds 10 seconds, use the progress bar instead
- When related content is grouped and loads at once, use the spinner
- To indicate processing or progress, use a spinner or progress bar instead
Best Practices
Create a structure that is simple, yet familiar to the user.
Don't represent every detail on the page as a skeleton, if it makes the page too complex.
Display the skeleton for the dynamic content of a page.
Don't use skeleton for static content that never changes.
General Component Behaviors
Page and content structure
The Skeleton represents the content load of a page. It will be immediately replaced by the actual content once it has loaded and is available for consumption.
Types
- Skeleton: Skeleton provides a visual placeholder for graphic and user interface elements on the page
- Text Skeleton: SkeletonText provides a visual placeholder for text elements on the page. It provides variants for Watson's typography styles
Variants
Basic skeleton shapes
Skeleton text
Styles
Skeleton animation
To provide clearer feedback when in a process, the prop animate=”true” allows us to enable an animation for the component.
Text skeleton
For a more realistic representation of the types of text we may have in the interface, the skeleton has different text styles that fit these.
Research and Additional Reading
- Skeleton Screens vs. Progress Bars vs. Spinners - NNG
- Skeleton Screens 101 - NNG
- Website Response Times - NNG
- Response Times: The 3 Important Limits - NNG
Known Gaps
- Additional accessibility score details and guidelines.