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
Default
false

color

Description

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

Type
string

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
Default
false

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

The size of the circular progress in CSS units

Type
string | number

thickness

Description

This defines the stroke width of the svg circle.

Type
string | number
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