Show loading structure
Skeletons preview the shape of content while data is loading.
A skeleton is a low-fidelity visual placeholder that represents the loading of interface elements.
Skeletons preview the shape of content while data is loading.
A matching placeholder reassures users that the page is still working.
Use skeletons sized like the final content to keep the page stable.
Shape (text)
Toggle the animated sheen that signals an active loading state.
Adds the sheening effect to communicate ongoing data loading.
Use borderRadius to match the shape of the content that will replace the skeleton.
Rounded rectangle. Use for cards, buttons, and inputs.
Render multiple stacked rows within the skeleton's height to mimic paragraphs of text.
One row. Represents a single line of text.
Skeleton supports custom width and height for matching the loading placeholder to the final content.
Use a simple line-sized skeleton for text placeholders.
Border radius lets the skeleton match rounded controls or media shapes.
Use default radius for text-like placeholders.
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-gap-xs8pxsgds-border-radius-sm—Size each placeholder to the element it stands in for so nothing shifts when the real content arrives.
If content loads in under a second, a skeleton flashes in and out. Use a spinner for short waits instead.
Turn on sheen so loading reads as in progress. A static placeholder looks like a permanent element.
No results found.
Skeletons signal loading, showing them in empty states misleads users into thinking content is on the way.
This component does not have a separate keyboard interaction table because:
Share them with us on Slack → #ask-sgds-v3
Report it on GitHub Issues → sgds/components/skeleton
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.