Preview, shimmer, busy state, loader, stencils, wireframes, placeholders, bones....
Skeleton
ECT approvedUpdated May 21, 2026
Description
- A skeleton is a placeholder shape that provides a low fidelity representation of an interface or content before it has loaded. Gradually replace a skeleton with real content as it becomes available.
- Skeletons are used to mitigate frustration by presenting users with the illusion of instant content transition that reduces the perception of idle waiting. Only use when content or layout is predictable.
- As much as possible, skeleton elements should appear in the same location as the content that will replace them.
Anatomy
Anatomy
Shapes
There are 3 shapes available: Circle, Rectangle - curved, and Rectangle - moderate.
Shapes
Size
- Set the height and width of each skeleton to match the size of the component that will replace it once loaded.
- Circles must always maintain their proper proportions.
- Ensure that skeletons are responsive and adjust to fill the container they are placed in.
Size
Animation
- An animated skeleton uses a repeating gradient pulse effect to visually convey that a process is ongoing.
- Animation should start as soon as the skeleton is visible.
- The gradient animates left to right. Each element has the same time to completion.
Keyframes
Keyframes
Static variant (reduced motion)
Apply a static variant if a user has activated "reduced motion" settings.
Static variant (reduced motion)
Color mode
Light (on white)
Light (on grey)
Dark (on black)
Dos and don'ts
Do
Do
Do
Don't
Don't
Technical Example
Skeleton component implemented in Carbon.
Other names
Spinner, progress indicator, infinite loader, indeterminate loader, wait animation, loading indicator, spin.
Requirements
Users should be able to:
- Understand that a process is ongoing and they need to wait.
- Perceive the loading state both visually and using assistive technology.
Interactions
Skeleton states are non-interactive and do not require user input.
Design considerations
- Use skeleton states sparingly.
- If the skeleton conveys information, make sure it has a minimum contrast ratio of 3:1 against the background.
Development considerations
- Screen reader users should be informed of loading states. If multiple skeleton states are present on page load:
- Use role=”status” or aria-live="polite" to announce content is loading.
- Use aria-busy="true" on the container being updated.
- If a single part of the page is loading, do not use an aria-live region. Instead, use visually hidden text with the loader to inform screen reader users of the loading state.
- Provide accessible naming to describe the skeleton state.
- Make sure all animated content has a prefers-reduced-motion media query attached to it, so that users who turn on reduced motion in the system settings do not see animation.
- Provide a fallback image or text for reduced motion.
| Date | Changes |
|---|---|
| November 2025 | Updated design and guidance based on ECT and accessibility recommendations. |
| August 2025 | Updated guidance on the accessibility tab. |
| September 2024 | New version created. Previous version archived in the frozen Product design system. |
Description
- Animated components bring the Sage brand flow into our products.
- Skeletons animate as soon as the user action is initiated such as selecting a page from the main navigation. Skeletons disappear when the content has loaded in.
- Developers can use the prefers-reduced-motion CSS media query to detect a user's system motion preferences, and apply CSS to disable motion if required.
Downloads
GIF
Lottie (JSON)
Technical Details
The gradient animates horizontally along the x-axis. It appears outside the of the skeleton container, sweeping across it until it disappears on the opposite side.
| Step 1 | Step 2 | |
|---|---|---|
| MS | 1000 | 400 |
| X position | -90 | 380 |