Progress circle

Default variant#

Progress circles are used to visually show the progression of a system operation such as downloading, uploading, processing, etc. By default, progress circles have a blue fill that shows the progress.

Over background variant#

When a progress circle needs to be placed on top of a colored background, use the over background variant. This progress circle uses a static white color regardless of the color theme. Make sure the background offers enough contrast for the progress circle to be legible.

Value, min value, max value#

The value is the progress of a system operation (e.g., downloading, uploading, processing) within the progress circle’s range, from the min value to max value.

The min and max values can also be customized appropriately for whatever the progress circle is showing. By default, the min value starts at 0 and the max value is set to 100.

These values are not applicable when a progress circle is indeterminate.

Size#

Progress circles come in 3 sizes: small, medium (default), or large. These are available to fit various contexts. For example, the small progress circle can be used in place of an icon or in tight spaces, while the large one can be used for full-page loading.

Indeterminate#

A progress circle can be either determinate or indeterminate. By default, progress circles are determinate. Use a determinate progress circle when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate progress circle when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).