Skip to main content Skip to navigation Skip to search

Progress Circle

This component or utility is offered as a preview. This means we are currently working on it and seeking feedback. Please be aware that this component or utility may have breaking changes before we finish working on it.

A progress circle is an indicator for providing feedback about an ongoing, user-initiated process using a circular visual.

Usage

Use a progress circle to set an expectation of the loading time. Progress circles are compact and can indicate progress in areas that cannot accommodate a progress bar.

Anatomy

Image of circular progress with arrows pointing to the track and indicator of the component

1. Track

The track is a complete circle that contains the indicator.

2. Indicator

The indicator travels along the track to show progress.

Sizes

There are five sizes for progress circle.

S
16 px
M
24 px
L
36 px
XL
48 px
XXL
64 px

States

Determinate

Use when the process has a known duration. It shows process completion towards a specific maximum term.

Indeterminate

Use when the process has no estimated end time. It indicates that work is occurring without indicating an estimated time until completion. It is also known as the spinner.