Signal content is coming
Skeleton screens replace blank states with a low-fidelity layout preview, so users see the page structure before the data arrives.
Skeleton
A skeleton is a low-fidelity visual placeholder that represents the loading of interface elements.
GitHub
components/skeleton
components/skeletonStorybook
components/skeleton
components/skeletonReduce perceived load time
When users see a skeleton that matches the shape of the incoming content, the wait feels shorter and the transition feels smoother.
Avoid layout shift
Placeholders sized to the actual content prevent the page from jumping around when data loads in, keeping the experience stable.
1
Placeholder surface
2
Loading animation
Rows
Skeleton screens use animated placeholder blocks that match the shape of the incoming content.
Renders animated placeholder rows. Use to preserve the page layout and reduce perceived loading time while data is being fetched.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: gap-xs under sgds/skeleton means sgds/skeleton/gap-xs.
sgds/skeleton
sgds/gap/xssgds/border-radius/smsgds/bg-translucentsgds/bg-translucent-subtleWhen to use
- Use skeleton while content is loading and the final layout is already known.
- Use it to preserve structure and reduce layout shift while data arrives.
When not to use
- Do not use skeleton when the wait is too short to notice.
- Do not leave skeleton visible after real content is ready.
Match the final layout
Skeleton works best when it closely reflects the content that will replace it.
Do not let loading states linger
A loading placeholder should disappear as soon as real content is ready to read.
Built-in accessibility
- Skeletons are loading placeholders.
- The component does not add custom keyboard behaviour.
Labels and content
- Use skeletons only while content is loading.
- Replace the skeleton with real content as soon as it is available.
Focus and interaction
- Skeleton placeholders should not receive focus.
- Do not use skeletons as the only status message for long waits.
This component does not have a separate keyboard interaction table because:
- Skeletons are loading placeholders and should not receive focus.
- If loading takes time, provide status text or a related control outside the skeleton.
Have suggestions or feedback?
Share them with us on
Found a bug or issue?
Report it on GitHub
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.