Components

Progress

Progress is represented by a linear indicator that displays the user's advancement through a specific task.

Alignment

Horizontal

Utilize the `progress` component class for the default horizontal progress component. Use the `w-{number}` utility class to represent the progress width. Refer TailwindCSS <a href="https://tailwindcss.com/docs/width" class="link link-primary" target="blank">width</a> documentation for more info.

Vertical

Use modifier class `progress-vertical` for vertical progress component. Use the `h-{number}` utility class to represent the progress height. Refer TailwindCSS <a href="https://tailwindcss.com/docs/height" class="link link-primary" target="blank">height</a> documentation for more info.

Variants

With custom height

Use TailwindCSS utility class `h-{number}` for custom height(thickness) of progress bar.

With labels (Horizontal) — Labels within

Utilize labels for presenting progress information.

25%
50%
75%
100%

With labels (Horizontal) — Labels at end

Use the following example to showcase labels positioned at the end of the progress bar.

25%
50%
75%
100%

With labels (Horizontal) — With title label

Use the following example to showcase progress bar with title label.

Title

25%

Title

50%

Title

75%

Title

100%

With labels (Horizontal) — Floating labels

Use the following example to showcase floating labels for progress bar. Use modifier class `progress-label` for basic floating label & position it using arbitrary class `ms-[calc(X% - Yrem)]`, where `X` is progress bar width(%) & `Y` is half the width of floating label.

25%
50%
75%
100%

With labels (Vertical) — In center

Use the labels to showcase progress for vertical bars.

25%
50%
75%
100%

With labels (Vertical) — At top

Use below given examples to showcase labels at top of vertical progress bars.

25%
50%
75%
100%

With labels (Vertical) — With labels & title

Use below given examples to showcase labels with title in vertical progress bars.

25%

Title

50%

Title

75%

Title

100%

Title

With labels (Vertical) — Floating labels

Implement floating labels for vertical progress bars using the provided example. Utilize the `progress-label` modifier class for the basic floating label and position it with the `bottom-[calc(X% - Yrem)]` class alongside classes `absolute start-0`. Here, `X` represents the progress bar height percentage, and `Y` signifies half the height of the floating label within the relative TailwindCSS position class.

25%
50%
75%
100%

Backgrounds

Semantic bars

To apply semantic colors to progress bars, utilize the `progress-{semantic-color}` class alongside the component class `progress-bar`.

Striped bars

Include the modifier class `progress-striped` with the `progress-bar` component class for striped progress bars.

Animated bars

Utilize the modifier classes `progress-striped` and `progress-animated` in conjunction with the component class `progress-bar` to create animated striped bars.

Shape

Rounded

This is the default shape of progress bars. Refer TailwindCSS <a href="https://tailwindcss.com/docs/border-radius" class="link link-primary" target="blank">border radius</a> documentation for more options.

Squared

Apply the TailwindCSS utility class `rounded-none` to both the component classes `progress` and `progress-bar` to create a squared progress bar.

Illustrations

Multiple progress

Utilize the provided examples to implement multiple progress bars along with corresponding options such as default, striped, and animated.

Default
Striped
Animated

Indeterminate

Apply the modifier class `progress-indeterminate` to the component class `progress-bar` to create a progress bar without a specific value.

Stepped bars

Implement the component class `progress-step` for the steps of the progress bar according to the provided examples.

25%

25%

50%

50%

100%

100%

Class referenceThe component, style, color, state, size and modifier classes available for this component.
ClassTypeDescription
progresscomponentBase class for progress container component.
progress-stepcomponentBase class for progress steps.
progress-barpartBase class for progress bar component.
progress-labelpartCreates the basic variant for floating labels.
progress-stripedstyleAdds striped background to progress bars.
progress-animatedstyleAdds animation to striped bars.
progress-indeterminatestyleUsed for progress bars without specific value.
progress-primarycolorAdds 'primary' color to progress bar.
progress-secondarycolorAdds 'secondary' color to progress bar.
progress-accentcolorAdds 'accent' color to progress bar.
progress-infocolorAdds 'info' color to progress bar.
progress-successcolorAdds 'success' color to progress bar.
progress-warningcolorAdds 'warning' color to progress bar.
progress-errorcolorAdds 'error' color to progress bar.
progress-verticaldirectionAligns the progress bar vertically.
progress-horizontaldirectionAligns the progress bar horizontal(default).