CircleProgress
CircleProgress is a component that displays progress in a circular progress bar.
Import
import { CircleProgress, CircleProgressLabel } from "@yamada-ui/react"
Usage
Editable example
<CircleProgress value={19} />
Change Size
You can change the boxSize (width, height) by setting a string or number to the size.
Editable example
<CircleProgress value={18} size={32} />
Change Thickness
To change the thickness of the progress bar, set a string or number to thickness.
Editable example
<CircleProgress value={31} thickness={1} />
Add Label
Editable example
<CircleProgress size="120px" min={0} max={1000} value={444} color="purple.500" trackColor="green.300" > <CircleProgressLabel color="purple.500">444%</CircleProgressLabel> </CircleProgress>
Round the Corners
You can round the progress bar by setting isRounded to true.
Editable example
<CircleProgress value={18} isRounded />
Apply Animation
Setting isAnimation to true will apply animation.
Editable example
<CircleProgress value={18} isAnimation />
Edit this page on GitHub