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

PropTypeDefault
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

On this page