ProgressCircle
A circular ring showing how far along something is.
Harbour rebrand
Tideline mobile
Crew interviews
In context
Harbour rebrand
Maya Chen, due 24 Oct
Tideline mobile
Jonas Weber, due 7 Nov
Crew interviews
Priya Nair, due 17 Oct
Rota export
Leo Santos, due 10 Oct
Depot signage
Maya Chen, due 21 Nov
Props
| Prop | Type | Required | Default |
|---|---|---|---|
percent | number | Yes | — |
size | number | undefined | No | 80 |
strokeWidth | number | undefined | No | 8 |
trackColor | string | undefined | No | — |
color | string | undefined | No | — |
children | ReactNode | No | — |
ariaLabel | string | undefined | No | — |
className | string | undefined | No | — |
Lighter-weight than GaugeChart
GaugeChart carries axis labels, ticks, and threshold bands for a real dashboard metric. ProgressCircle is the antd-mobile pattern for a bare "how far along is this" ring — an upload, a multi-step form's completion — with none of that configuration. Reach for GaugeChart when the extra context matters; reach for this when it would just be visual noise.
data-rebar-* attributes
data-rebar-component="progress-circle" on the root; parts: track, fill, label.
Migrating to Ant Design
Not codemod-covered — the antd-mobile pattern. AntD desktop's Progress component with type="circle" is the direct equivalent.