Leave Yamada UI a star
StarCircleProgress is a component that displays progress in a circular progress bar.
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'Description
If true, the cap of the progress indicator will be rounded.
Type
booleanDefault
falseDescription
If true, the progress will be indeterminate and the value prop will be ignored.
Deprecated
It will be deprecated in version 2.0.
Type
booleanDefault
falseDescription
If true, the cap of the progress indicator will be rounded.
Deprecated
Use fullRounded instead.
Type
booleanDefault
falseDescription
The maximum value of the progress.
Type
numberDefault
100Description
The minimum value of the progress.
Type
numberDefault
0Description
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'Description
The animation speed in seconds.
Type
[string | number, string | number]Default
'[1.4s, 2s]'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'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'Description
The value of the progress.
Type
numberDefault
0Edit this page on GitHub