Progress

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

You can use the data-indeterminate attribute to make it an indeterminate progress bar which is useful when you don't know how long an operation will take or when displaying a loading animation.

You can make a progress bar appear with a striped pattern using the data-striped attribute as following:

Or you can make a transparent striped progress bar:

• progress-base: The base slot of the progress, which is the main container.
• label-wrapper: 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.

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

Progress has the following attributes on the base element:

• data-indeterminate: Indicates whether the progress is indeterminate.
• data-disabled: Indicates whether the progress is disabled.
• data-striped: Indicates whether the progress is striped.
• data-value: The current value (controlled).

• Labeling support for accessibility.
• Internationalized number formatting as a percentage or value.
• Determinate and indeterminate progress support.