Progress

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

Props#

`colorScheme`

Description

The visual color appearance of the component

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

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