Progress

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

Installation

npx nextui-cli@latest add progress

The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

Usage

Note: Make sure to pass the aria-label prop when the label prop is not provided. This is required for accessibility.

Sizes

Colors

Indeterminate

You can use the isIndeterminate prop to display an indeterminate progress bar. This is useful when you don't know how long an operation will take.

Striped

With Label

Note: If you pass the label prop you don't need to pass aria-label prop anymore.

With Value

Value Formatting

Values are formatted as a percentage by default, but this can be modified by using the formatOptions prop to specify a different format. formatOptions is compatible with the option parameter of Intl.NumberFormat and is applied based on the current locale.

Slots

• base: The base slot of the progress, it is the main container.
• labelWrapper: The label and value label wrapper.
• label: The label of the progress.
• value: The value label of the progress.
• track: The track is the background bar of the progress.
• indicator: The indicator is the bar that is filled according to the value.

Custom Styles

You can customize the Progress component by passing custom Tailwind CSS classes to the component slots.

Data Attributes

CircularProgress has the following attributes on the base element:

• data-indeterminate: Indicates whether the progress is indeterminate.
• data-disabled: Indicates whether the progress is disabled. Based on isDisabled prop.

Accessibility

• Exposed to assistive technology as a progress bar via ARIA.
• Labeling support for accessibility.
• Internationalized number formatting as a percentage or value.
• Determinate and indeterminate progress support.
• Exposes the aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext attributes.

API

Progress Props