Use progress circles to:
- Show progress toward a single goal or target (e.g., profile completion, savings goal)
- Display completion percentage for non-linear processes
- Visualise performance metrics or achievements
- Provide progress feedback across multiple steps or screens
- Present data where circular representation is more appropriate than linear
Do not use progress circles:
- For indeterminate processes where progress cannot be calculated — use a spinner instead
- Within linear flows or step-by-step processes — use a progress bar instead
- When space is minimal, consider a progress bar for a more compact option
- Without supporting text that explains what is being measured
Progress circle vs progress bar vs spinner
|
Use a progress circle for |
Use a progress bar for |
Use a spinner for |
|---|---|---|
|
Non-linear determinate processes (goals, targets) |
Linear determinate processes (uploads, downloads) |
Indeterminate processes (unknown duration) |
|
Single metrics displayed prominently |
Single metrics where the completion metric is known |
Loading states without progress tracking |
|
Circular space-efficient layouts |
Horizontal layouts with limited height |
Initial page or content load |
|
Profile completion, savings goals |
File transfers, form progress |
Server requests, background processing |
Best practice note: Progress circles are best suited for displaying achievement or completion metrics where the circular format emphasises the goal-oriented nature of the task. Use progress bars for sequential, linear processes.
Common use cases
An everyday use case for this component is providing data across multiple steps or screens, such as a user profile completion indicator.
Examples include:
- Profile completion percentage
- Savings or financial goal progress
- Course or learning module completion
- Task or checklist completion
- Membership or subscription level progress