Circular progress

Circular progress indicates an ongoing process.


A circular progress reassures users that a request is being processed but they don’t provide details on back-end processes. The request that triggers a circular progress can be user-initiated — while an action processes — or system-initiated, while a page or component loads. The circular progress uses animation to draw users’ attention and provide information; it should never be decorative.


  1. Circular progress animation: The circle animates to indicate progress is occurring.


Storybook failed to load. Please connect to the VPN to access.

Open the component in Figma.

When to use

Use a circular progress indicator when you need to reassure users when they are waiting for the system, including when submitting a form or waiting for a table to load.

When not to use

Don’t use a circular progress indicator when the system is waiting for the user to take action somewhere else. For example, when the Sign-In Widget needs the user to check their email to continue.



There are two types of circular progress indicators for use with either known or unknown durations.


Indicates a specific amount of progress occurring by filling a circular track with color over a defined number of seconds. These should be used to display progress for tasks with a known total duration.


Indicates that progress is occurring by spinning a colored bar around a circular track. These should be used to display an undefined wait time for tasks with an unknown total duration, since they don’t indicate how much progress remains.




Processing user action

To indicate a form is being submitted, a circular progress indicator can be added to a button before the label to indicate processing.


Work with engineering to define when the circular load indicator appears. By default, the circular progress should display at one second.


Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone.


Content guidelines

Circular progress label

  • A circular progress indicator typically appears when people initiate a process, so a label is usually unnecessary.
  • If context is needed, a custom label should be added to set user expectations.Align with the verb of the action the user is initiating as much as possible.

Default label text

If there doesn’t seem to be a clear verb to use as the label, use the default label:


Content accessibility

To meet accessibility requirements, the circular progress indicator must include ARIA labels. The default labels are:


Label text


Loading complete


Indeterminate description

A line spins continuously around a circular track.


Determinate description

A line gradually expands on a circular track until it creates a solid circle.

Figma: Circular progress