Circular Progress

Circular progress indicators are utilized to indicate an undetermined wait period or visually represent the duration of a process.

Installation

The above command is for individual installation only. You may skip this step if @heroui/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

With Label

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 circular progress, it is the main container.
• svgWrapper: The wrapper of the svg circles and the value label.
• svg: The svg element of the circles.
• track: The track is the background circle of the circular progress.
• indicator: The indicator is the one that is filled according to the value.
• value: The value content.
• label: The label content.

Custom Styles

You can customize the CircularProgress 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