Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Spinner

Spinners notify users that their request is being processed.

GitHubGitHub logocomponents/spinner
StorybookStorybook logocomponents/spinner
DesignUsageAccessibilityUpdates

Purpose

Acknowledge the request

A spinner immediately confirms to the user that their action was received and something is being processed — preventing repeat clicks.

Use for indeterminate waits

Spinners are best when you can't predict how long an operation will take — they signal ongoing activity without implying a specific duration.

Keep it in context

Position the spinner near the element that triggered the action so users can see that the specific thing they asked for is being handled.

Anatomy

1

Spinner glyph

2

Motion state

Configuration

Default

The spinner is an animated circular indicator that signals an in-progress operation with an indeterminate duration.

Renders an animated circular indicator. Use for indeterminate waits where the duration cannot be predicted — such as API calls, form submissions, or page transitions.

Playground

BETA

Structure

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: gap-2-xs under sgds/spinner means sgds/spinner/gap-2-xs.

sgds/spinner
CategoryComponent tokenSemantic tokenValueGapgap-2-xssgds/gap/2-xs4pxTypographyfont-size-14sgds/font-size/14—Coloursurface-defaultsgds/surface-default#FFFFFFsurface-fixed-darksgds/surface-fixed-dark—surface-fixed-lightsgds/surface-fixed-light—surface-inversesgds/surface-inverse—bg-translucentsgds/bg-translucent—primary-surface-defaultsgds/primary/surface/default—neutral-color-defaultsgds/neutral/color/default—neutral-surface-defaultsgds/neutral/surface/default—Sizedimension-16sgds/dimension/16—dimension-24sgds/dimension/24—dimension-32sgds/dimension/32—dimension-48sgds/dimension/4848pxdimension-64sgds/dimension/64—

Usage

When to use

  • Use spinner for short indeterminate waits where users need to know that work is in progress.
  • Use it when you cannot accurately predict the remaining duration.

When not to use

  • Do not use spinner for long waits without any supporting context.
  • Do not leave users blocked without explaining what is happening next.

Best practices

Use spinner for brief in-progress states

A spinner works best when the wait is short and users only need confirmation that work has started.

Do not leave users waiting without context

Long waits need clearer status information than a spinner alone can provide.

Accessibility considerations

Built-in accessibility

  • Spinners are loading indicators.
  • The component does not add custom keyboard behaviour.

Labels and content

  • Pair the spinner with text when users need to know what is loading.
  • Use a progress bar instead when determinate progress is available.

Focus and interaction

  • Spinners should not receive focus.
  • Do not trap users on a loading state without a way forward.

Keyboard interaction

This component does not have a separate keyboard interaction table because:

  • Spinners are loading indicators and should not receive focus.
  • Keyboard interaction belongs to any related control, such as a cancel or retry button.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for spinnerPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/spinner

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.