Overview
The progress circle 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 increments.
Size selection
The appropriate size should be used based on placement and importance in the overall layout:
- Small — Compact contexts, secondary information, inline with text
- Medium — Standard use cases, balanced prominence
- Large — Primary focus areas, dashboards, prominent metrics
Size Variants: Small, Medium and Large
Supporting content
A percentage and a nearby label should always accompany the progress circle. There is a range of possible compositions, but always include:
- Percentage value — Shows the exact completion amount (e.g., "75%")
- Title — Explains what is being measured (e.g., "Profile complete", "Savings goal")
- Sublabel (Optional) — Optional sublabel with information
The example composition shows one arrangement, but the percentage and label can be positioned in various ways to suit the layout.
Example of a progress circle and supporting title and sublabel