progress API
feedback/circular-progress.tsx
CircularProgress
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | undefined | 48 | Diameter in pixels. |
strokeWidth | number | undefined | 4 | Arc stroke width in pixels. |
variant | CircularProgressVariant | "primary" | "success" | "warning" | "danger" | "info" | undefined | CircularProgressVariant.Primary | Arc color. |
showLabel | boolean | undefined | false | Show the percentage in the center. |
indeterminate | boolean | undefined | false | Indeterminate (loading) state — spinning arc. |
label | string | undefined | Progress | Accessible label. |
Show native HTML props
Native HTML Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | undefined | 0 | Percentage 0–100. |
className | string | undefined | — |
CircularProgressVariant
feedback/progress.tsx
Progress
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | ProgressSize | "xs" | "sm" | "md" | "lg" | "xl" | undefined | ProgressSize.Medium | Track height preset. |
variant | ProgressVariant | "primary" | "success" | "warning" | "danger" | "info" | "glass" | undefined | ProgressVariant.Primary | Bar color. |
showLabel | boolean | undefined | false | Show label row with percentage. |
animated | boolean | undefined | false | Animated shine on the filled bar. |
striped | boolean | undefined | false | Striped pattern. |
indeterminate | boolean | undefined | false | Indeterminate (loading) state with a sweeping bar. |
label | string | undefined | — | Custom label text. |
shape | ProgressShape | "rounded" | "square" | "pill" | undefined | ProgressShape.Rounded | Corner rounding. |
Show native HTML props
Native HTML Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | undefined | 0 | Percentage 0–100. |
className | string | undefined | — |