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.
- Circular progress animation: The circle animates to indicate progress is occurring.
Open the component in Figma.
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.
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.
- 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:
To meet accessibility requirements, the circular progress indicator must include ARIA labels. The default labels are:
A line spins continuously around a circular track.
A line gradually expands on a circular track until it creates a solid circle.