Progress

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

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

Default

You can control the current value of progress.

Indeterminated

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

Colors

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

Sizes

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

Status

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

Shadow

You can add a shadow effect with the property shadow.

Striped

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

Squared

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

No Animated

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

APIs

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
...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';