Progress

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


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

Circular Progress Props

AttributeTypeDescriptionDefault
labelReactNodeThe content to display as the label.-
sizesm | md | lgThe size of the indicator.md
colordefault | primary | secondary | success | warning | dangerThe color of the indicator.primary
radiusnone | sm | md | lg | fullThe progress border radius.full
valuenumberThe current value (controlled).-
valueLabelReactNodeThe content to display as the value's label (e.g. 1 of 4).-
minValuenumberThe smallest value allowed for the input.0
maxValuenumberThe largest value allowed for the input.100
formatOptionsIntl.NumberFormatThe options to format the value.{style: 'percent'}
isIndeterminatebooleanWhether the progress is indeterminate.false
isStripedbooleanWhether the progress is striped.false
showValueLabelbooleanWhether to show the value label.true
isDisabledbooleanWhether the progress is disabled.false
disableAnimationbooleanWhether to disable the animation.false
classNamesRecord<"base"|"labelWrapper"|"label"|"track"|"value"|"track"|"indicator", string>Allows to set custom class names for the progress slots.-