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 animation: The circle animates to indicate progress is occurring.
Demo
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.