Progress

Progress is used to display the progress status for a task that takes a long time or consists of several steps.

    SourceTheme Source@chakra-ui/progress

Props#

colorScheme

Description

The visual color appearance of the component

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"
Default
blue

hasStripe

Description

If true, the progress bar will show stripe

Type
boolean
Default
false

isAnimated

Description

If true, and hasStripe is true, the stripes will be animated

Type
boolean
Default
false

isIndeterminate

Description

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

Type
boolean
Default
false

max

Description

The maximum value of the progress

Type
number
Default
100

min

Description

The minimum value of the progress

Type
number
Default
0

size

Description

The size of the Progress

Type
"xs" | "sm" | "md" | "lg"
Default
md

value

Description

The value of the progress indicator. If undefined the progress bar will be in indeterminate state

Type
number

variant

Description

The variant of the Progress

Type
string
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel