Progress

The Progress component allows you to view the progress of any activity.

import { Progress } from '@nextui-org/react';

You can control the current value of progress.

You can have a Progress bar with indeterminate value with the indeterminated property.

You can change the color of the Progress with the property color.

You can change the height of the progress with the property size.

You can change the background of the Progress with the property status.

You can add a shadow effect with the property shadow.

You can add striped prop to Progress to apply a stripe over the progress bar's background color.

You can change the full style to a squared Progress with the squared property.

You can disabled the initial animation setting animated={false}.

Attribute	Type	Accepted values	Description	Default
value	`number`	-	Current value	-
min	`number`	-	Progress min value	`0`
max	`number`	-	Progress max value	`100`
color	`NormalColors`	NormalColors	Change filler bar color	`default`
status	`NormalColors`	NormalColors	Change filler bar background color	`default`
size	`NormalSizes`	NormalSizes	Change progress size	`medium`
striped	`boolean`	`true/false`	Stripe over the progress bar's background color	`false`
indeterminated	`boolean`	`true/false`	Indeterminated progress	`false`
shadow	`boolean`	`true/false`	Display shadow effect	`false`
squared	`boolean`	`true/false`	Squared progress	`false`
animated	`boolean`	`true/false`	Enable or disable the progress animation	`true`
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`div`
...	`ProgressHTMLAttributes`	`'id', 'className', ...`	Progress native props	-

type NormalColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'gradient';

type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';