Show work in progress
Use a spinner to show that the system is processing a request.
Use a spinner to show that the system is processing a request.
Spinners fit waits where progress cannot be measured precisely.
Show the spinner near the control or area that started loading.
Spinner glyph
Label
The colour tone of the spinner. Pick a tone that contrasts with the surface it sits on.
Brand-coloured spinner. Default for primary loading states.
Match the spinner scale to the size of the surrounding component or button.
Default size for most loading states.
Optional text label that accompanies the spinner to describe the action being performed.
Adds a descriptive label so users know what is being loaded.
Spinner orientation controls whether the label sits beside or below the spinner.
Use horizontal orientation when space allows the label to sit beside the spinner.
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-font-size-14—sgds-dimension-32—Spinners suit brief, unmeasurable waits like fetching data. For longer or measurable progress, use a bar.
If you can show what proportion is done, uploading a known file size, a progress bar gives better feedback.
Add a label so users know what is loading. Without context, a spinner only says that something is happening, not what.
If the operation fails or stalls, replace the spinner with a clear error message and a way to retry.
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/spinner
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.