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

Progress bar

Provide up-to-date feedback on the progress of a workflow or action with a progress bar.

GitHubGitHub logocomponents/progress-bar
StorybookStorybook logocomponents/progress-bar
DesignUsageAccessibilityUpdates

Purpose

Show ongoing progress

A progress bar communicates that work is happening and gives users a sense of how far along it is — reducing anxiety during longer operations.

Make completeness visible

When a process has a known endpoint — uploading a file, completing a profile — a progress bar shows how much is done versus how much remains.

Prevent unnecessary interruptions

When users can see progress, they're less likely to abort a task or re-trigger it by clicking again.

Anatomy

1

Track

2

Progress indicator

3

Label

Configuration

Label

The progress bar shows how far a process has advanced with an optional descriptive label.

Renders a horizontal progress bar with a labelled percentage. Use when a process has a known endpoint — such as a file upload or multi-step form — and users need to see how far along it is.

Playground

BETA

Structure

Component tokens

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

sgds/progress-bar
CategoryComponent tokenSemantic tokenValueGapgap-2-xssgds/gap/2-xs4pxTypographyfont-size-14sgds/font-size/14—Colourcolor-subtlesgds/color-subtle#525252bg-translucentsgds/bg-translucent—primary-surface-defaultsgds/primary/surface/default—neutral-surface-defaultsgds/neutral/surface/default—Sizedimension-4sgds/dimension/4—

Usage

When to use

  • Use this component to communicate a clear system state, status, or next step at the right moment.
  • Use it when users need immediate feedback that is tied to a task, outcome, or page context.

When not to use

  • Do not use this component for routine body content that should stay in the normal page flow.
  • Do not stack multiple messages of the same priority when one clear message is enough.

Best practices

Keep the message specific

Use a clear message with one purpose so users can act or move on quickly.

Do not stack competing messages

Multiple repeated messages compete for attention and make it harder to see what matters.

Accessibility considerations

Built-in accessibility

  • Progress bars expose progress semantics with `role="progressbar"`.
  • The component supports accessible value attributes and an accessible label.

Labels and content

  • Use a clear label when the progress bar needs context.
  • Keep the value, minimum, and maximum accurate as progress changes.

Focus and interaction

  • Progress bars should not receive focus unless paired with an interactive control.
  • Use status text nearby when users need to know what is happening.

Keyboard interaction

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

  • Progress bars communicate status and usually 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 progress barPlannedTBD

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/progress-bar

Singapore Government Design System

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