Progress Circle
Overview
A progress circle is a progress indicator, either determinate (indicating a percentage of progression) or indeterminate (indicating a state of loading).
Usage
When to use:
- When managing action like download, upload, retrieval of data, …
- When the system is temporarily disabled, to block the screen
- When the processing takes more than a few seconds
- Generally, to provide feedback to the user about progression.
Anatomy
Properties
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework. In Figma, these are defined as properties that help define each variant.
Heads up
A star or asterisk symbol (*) can be used as a prefix to some Figma component properties in order to inform that the corresponding property is only used that way on the design side (Figma component libraries).
❖ Component: Progress Circle
| Property | Values | Default |
|---|---|---|
| variant | determinate / indeterminate | determinate |
| size | xsmall / small / medium / large / xlarge / xxlarge | xsmall |
| color | primary / neutral | primary |
| progress | 0% / 50% / 100% / N/A | 0% |
| step | step-1 / step-2 / step-3 / step-4 / N/A | N/A |
| track | true / false | true |
Behaviour
Determinate & Indeterminate
The progress circle comes in two different types, segregated into two main components.
The determinate type, when progress can be calculated against a target (download, upload, know sizes, …)
The indeterminate type, when there is progress but the completion cannot be determined (connection to a server, retrieving unknown amount of data, …)
Sizes
Progress circles are available in five sizes to cater for the diverse range of use cases and devices that our business uses.
Background
The Progress circle has a background (track) by default. You can choose to remove the background to adapt for different use cases and interfaces styles.
Colour emphasis
By default, progress circles are emphasized (primary theme). Providing a visual prominence.
For visual components where you don’t want to emphasize the progress circle component, the neutral theme is more appropriate for this de-prioritize its focus on the screen.
Progress indication
The determinate variant comes in 3 main progress steps: 0%, 50% and 100%. Those steps are mainly used for animation purpose, but you can choose to use them as static.
The indeterminate variant comes in 4 main progress steps: Step 1, Step 2, Step 3 & Step 4. Those steps are mainly used for animation purpose, but you can choose to use them as static.
Progress Animation
The progress circle is animated by default thanks to the Interactive Components feature on Figma. If you would like to remove this capacity, you need to deactivate it in the prototyping panel.
The indeterminate variant comes as an infinite loader with a 360° rotation every second. The determinate variant moves from 0% to 50% in 3s, and from 50% to 100% in 2.5s for a total cycle of 5.5s.
This can be manually overwritten if you need other timings.
Usage Guidelines
Use the different sizes to match the use cases
- Don’t: try to fit large sizes in non-adapted layouts.
- Do: adapt the size for each use case (matching contextual icon sizes, for example)
