"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
hasStripeIf true, the progress bar will show stripe
booleanisAnimated
isAnimatedIf true, and hasStripe is true, the stripes will be animated
booleanisIndeterminate
isIndeterminateIf true, the progress will be indeterminate and the value
prop will be ignored
booleanmax
maxThe maximum value of the progress
number100min
minThe minimum value of the progress
number0size
size"xs" | "sm" | "md" | "lg""md"value
valueThe value of the progress indicator.
If undefined the progress bar will be in indeterminate state
numbervariant
variantVariants for Progress are not implemented in the default theme. You can extend the theme to implement them.
stringProps#
colorScheme
colorScheme"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram""blue"hasStripe
hasStripeIf true, the progress bar will show stripe
booleanisAnimated
isAnimatedIf true, and hasStripe is true, the stripes will be animated
booleanisIndeterminate
isIndeterminateIf true, the progress will be indeterminate and the value
prop will be ignored
booleanmax
maxThe maximum value of the progress
number100min
minThe minimum value of the progress
number0size
size"xs" | "sm" | "md" | "lg""md"value
valueThe value of the progress indicator.
If undefined the progress bar will be in indeterminate state
numbervariant
variantVariants for Progress are not implemented in the default theme. You can extend the theme to implement them.
string