Progress Donut

This component is for measuring the performance of any goal or target, a single metric. They should be used to display the progress of a determinate process but not within a linear flow.

A common use case for this component in providing data in multiple steps or screens, such as a user profile.

If you require an indicator for an indeterminate process then use a spinner.

Key Points

There are three sizes of progress donut to suit different situations

The component should always use the theme highlight colour and the theme border colour for the track

Place the progress donut next to content to provide supporting context

The progress donut uses the highlight colour, as opposed to the selected colour, as it is should stand out on a page composition

Usage

The progress donut is a visual representation of how much a user has completed in a process. As it is circular it offers the flexibility to work for a process that has steps of various scales of increments.

The appropriate size should be used based on its placement and importance in the overall layout.

Progress Donuts

L to R: Small, Medium and Large

The progress donut should always be supported by a percentage and label nearby. Below is one example composition, however, there are a range of possibilities.

Progress Donut + Labels

Example of a composition using a progress donut.