Circular Progress

Circular Progress is used to indicates the progress for determinate and indeterminate processes.

    SourceTheme source@chakra-ui/progress

Props#

capIsRound

Description

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

Type
boolean

getValueText

Description

A function that returns the desired valueText to use in place of the value

Type
((value: number, percent: number) => string)

isIndeterminate

Description

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

Type
boolean

max

Description

Maximum value defining 100% progress made (must be higher than 'min')

Type
number
Default
100

min

Description

Minimum value defining 'no progress' (must be lower than 'max')

Type
number
Default
0

size

Description

Sizes for CircularProgress are not implemented in the default theme. You can extend the theme to implement them.

Type
string

thickness

Description

This defines the stroke width of the svg circle.

Type
StringOrNumber
Default
"10px"

trackColor

Description

The color name of the progress track. Use a color key in the theme object

Type
string

value

Description

Current progress (must be between min/max)

Type
number

valueText

Description

The desired valueText to use in place of the value

Type
string
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel