If true
, the cap of the progress indicator will be rounded.
Circular Progress
The CircularProgress component is used to indicate the progress for determinate and indeterminate processes.
- Determinate progress: fills the circular track with color, as the indicator moves from 0 to 360 degrees.
- Indeterminate progress: grows and shrinks the indicator while moving along the circular track.
Import#
import { CircularProgress, CircularProgressLabel } from '@chakra-ui/react'
Usage#
<CircularProgress value={80} />
Changing the size#
You can add size
prop to the progress bar to add a custom size.
// Change the size to 120px<CircularProgress value={30} size='120px' />
Changing the thickness#
You can add the thickness
prop to update the thickness of the progress ring.
This defines the stroke width of the svg circle.
<CircularProgress value={59} size='100px' thickness='4px' />
Changing the color#
You can add color
prop to any progress bar to apply any color that exists in
the theme.
<CircularProgress value={30} color='orange.400' thickness='12px' />
Adding label#
Chakra exports a CircularProgressLabel
to help you add a label. Pass this
component as children
prop and you'll be able to render the value.
<CircularProgress value={40} color='green.400'><CircularProgressLabel>40%</CircularProgressLabel></CircularProgress>
Indeterminate Progress#
Setting the progress to indeterminate means you're not able to determine the
value
upfront. Pass the isIndeterminate
prop to activate this state.
<CircularProgress isIndeterminate color='green.300' />
Accessibility#
- Progress has
role
set toprogressbar
to denote that it is a progress bar. - Progress has
aria-valuenow
set to the percentage completion value passed to the component, to ensure the progress percent is visible to screen readers.
Props#
capIsRound
capIsRound
boolean
getValueText
getValueText
A function that returns the desired valueText to use in place of the value
((value: number, percent: number) => string)
isIndeterminate
isIndeterminate
If true
, the progress will be indeterminate and the value
prop will be ignored
boolean
max
max
Maximum value defining 100% progress made (must be higher than 'min')
number
min
min
Minimum value defining 'no progress' (must be lower than 'max')
number
size
size
Sizes for CircularProgress
are not implemented in the default theme. You can extend the theme to implement them.
string
thickness
thickness
This defines the stroke width of the svg circle.
StringOrNumber
trackColor
trackColor
The color name of the progress track. Use a color key in the theme object
string
value
value
Current progress (must be between min/max)
number
valueText
valueText
The desired valueText to use in place of the value
string