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? | ConditionalStyle<Values<Record<"inherit" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl", { fontSize: string; vars: { [x: string]: string; }; }>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
value? | number | - |
Edit on GitHub
Last updated on