Circular Progress
A ring that fills as a task completes, for tight spaces and dashboards. Without a value it spins.JSX
<CircularProgress label="Upload progress" />
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { CircularProgress } from '@advui/core'
<CircularProgress value={used} max={quota} label="Storage used" showValue />Examples
Storage used
Preview
Code
Photos
Documents
Backups
Sizes and indeterminate
Without a value the ring spins, for work of unknown length.Preview
Code
Syncing…
API reference
CircularProgress
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | — | Current value; `null` shows a spinning, indeterminate ring. |
max | number | 100 | Maximum value. |
label | string | — | Accessible name. |
size | 'sm' | 'md' | 'lg' | 'md' | 24, 40 or 64px across. |
tone | 'primary' | 'success' | 'warning' | 'error' | 'primary' | Ring color. |
showValue | boolean | false | Show the percentage in the middle (`md` and `lg`). |
Accessibility
role="progressbar"witharia-valuemin/max/now, so screen readers read the percentage; give it alabel.- The percentage text is hidden from assistive technology, which already gets the value.
- An indeterminate ring has no value and sets
aria-busy. It keeps spinning, more slowly, when reduced motion is on. - Colors come from the theme, and the ring is never the only way a state is shown: pair it with text.
Platform notes
Web
An inline SVG; the value animates with a CSS transition.
iOS
Drawn with react-native-svg; the indeterminate ring spins on the native driver.
Android
Same as iOS. The percentage is also given as value text ("Storage used, 82%"): TalkBack reads a value only as text for a progress bar role.