Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

CircleProgress

CircleProgress is a component that displays progress in a circular progress bar.

Source@yamada-ui/progress

Props

CircleProgressProps

color

Description

The CSS color property.

Type

UIValue<"border" | ({} & string) | Color | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">

Default

'primary'

isAnimation

Description

If true, the progress will be indeterminate and the value prop will be ignored.

Type

boolean

Default

false

isRounded

Description

If true, the cap of the progress indicator will be rounded.

Type

boolean

Default

false

max

Description

The maximum value of the progress.

Type

number

Default

100

min

Description

The minimum value of the progress.

Type

number

Default

0

size

Deprecated

Description

The CSS box-size property.

Deprecated

Use boxSize instead.

Type

UIValue<number | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "auto" | "fit-content" | ... 75 more ... | "xs">

Default

'6rem'

speed

Description

The animation speed in seconds.

Type

[string | number, string | number]

Default

'[1.4s, 2s]'

thickness

Description

The CSS width property.

Type

UIValue<number | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "auto" | "fit-content" | ... 75 more ... | "xs">

Default

'0.625ewm'

trackColor

Description

The CSS color property.

Type

UIValue<"border" | ({} & string) | Color | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">

Default

'border'

value

Description

The value of the progress.

Type

number

Default

0

Edit this page on GitHub

PreviousProgressNextMedia and Icons