Feedback
CircularProgress
Circular loading indicator. Indeterminate spins; determinate fills to a value. Primary or secondary color, two sizes.
Examples
Sizes
Loading preview
<CircularProgress size="small" />
<CircularProgress />API
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'indeterminate' | 'determinate' | indeterminate | Spinner or value-based fill. |
value | number | none | Progress 0 to 100 for the determinate variant. |
size | 'small' | 'medium' | medium | Diameter: small 20px, medium 40px. |
color | 'primary' | 'secondary' | primary | Color treatment. |
Guidelines
Do
- Pair with an accessible label when standalone.
- Use determinate when progress is known.
Avoid
- Do not block the whole screen for short waits; prefer inline indicators.