"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
Progress
Progress is used to display the progress status for a task that takes a long time or consists of several steps.
Props#
colorScheme
colorScheme
"blue"
hasStripe
hasStripe
If true
, the progress bar will show stripe
boolean
isAnimated
isAnimated
If true
, and hasStripe is true
, the stripes will be animated
boolean
isIndeterminate
isIndeterminate
If true
, the progress will be indeterminate and the value
prop will be ignored
boolean
max
max
The maximum value of the progress
number
100
min
min
The minimum value of the progress
number
0
size
size
"xs" | "sm" | "md" | "lg"
"md"
value
value
The value
of the progress indicator.
If undefined
the progress bar will be in indeterminate
state
number
variant
variant
Variants for Progress
are not implemented in the default theme. You can extend the theme to implement them.
string
Props#
colorScheme
colorScheme
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
"blue"
hasStripe
hasStripe
If true
, the progress bar will show stripe
boolean
isAnimated
isAnimated
If true
, and hasStripe is true
, the stripes will be animated
boolean
isIndeterminate
isIndeterminate
If true
, the progress will be indeterminate and the value
prop will be ignored
boolean
max
max
The maximum value of the progress
number
100
min
min
The minimum value of the progress
number
0
size
size
"xs" | "sm" | "md" | "lg"
"md"
value
value
The value
of the progress indicator.
If undefined
the progress bar will be in indeterminate
state
number
variant
variant
Variants for Progress
are not implemented in the default theme. You can extend the theme to implement them.
string