CircularProgress
The CircularProgress component displays a circular rating or progress indicator.
Usage
Default
<CircularProgress rating={75} label="Progress Score" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| rating | number | - | Current value shown in the circular progress. |
| min | number | 0 | Minimum value for the progress range. |
| max | number | 100 | Maximum value for the progress range. |
| label | string | "Progress" | Optional label displayed below or inside the circular progress. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Visual shadow depth for the component. |
| showRaw | boolean | false | Show the raw numeric value instead of the formatted percentage. |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Size of the circular progress indicator. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Visual theme of the component. |
| state | " | success | error | warning | - | Status color: '', success, error, or warning. |
| className | string | - | Additional CSS class names for custom styling. |
| data-testid | string | "circular-progress" | Test ID for targeting the component in tests. |