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.

No Animated

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


Progress Props

AttributeTypeAccepted valuesDescriptionDefault
valuenumber-Current value-
minnumber-Progress min value0
maxnumber-Progress max value100
colorNormalColorsNormalColorsChange filler bar colordefault
statusNormalColorsNormalColorsChange filler bar background colordefault
sizeNormalSizesNormalSizesChange progress sizemedium
stripedbooleantrue/falseStripe over the progress bar's background colorfalse
indeterminatedbooleantrue/falseIndeterminated progressfalse
shadowbooleantrue/falseDisplay shadow effectfalse
squaredbooleantrue/falseSquared progressfalse
animatedbooleantrue/falseEnable or disable the progress animationtrue
cssStitches.CSS-Override Default CSS style-
askeyof JSX.IntrinsicElements-Changes which tag component outputsdiv
...ProgressHTMLAttributes'id', 'className', ...Progress native props-

Progress types

Normal Colors

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

Normal Sizes

type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
gradient blue backgroundgradient violet background