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 the 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
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.
Styles
Skeleton animation
To provide clearer feedback when in a process, the prop animate=”true” allows us to enable an animation for the component.
Noa skeleton
For Noa-related interfaces, use skeleton style Noa.
Research and Additional Reading
- Skeleton Screens vs. Progress Bars vs. Spinners - NNG
- Skeleton Screens 101 - NNG
- Response Times: The 3 Important Limits - NNG
- Skeleton Loaders - Material Design