Circular progress

Circular progress indicates an ongoing process.

Overview

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.

Anatomy

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

Demo

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.

Variants

 

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

Determinate

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.

Indeterminate

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.

 

Behaviors

States

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.

Timing

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

Accessibility

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:

Loading…

Content accessibility

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

 

Label text

Loading

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