Progress Circle
A circular progress indicator that can be determinate or indeterminate.
Usage
The ProgressCircle component can be used to indicate progress or loading states.
Determinate Example
Indeterminate Example
Color Examples
Here are examples of the ProgressCircle with different colors:
Size Examples
Here are examples of the ProgressCircle with different sizes:
Props
| Prop | Type | Default |
|---|---|---|
size? | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "default", "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl">> | - |
maxValue? | number | 100 |
minValue? | number | 0 |
value? | number | 0 |
valueLabel? | ReactNode | - |
formatOptions? | NumberFormatOptions | {style: 'percent'} |
Edit on GitHub
Last updated on