• components
  • Progress

components

Tailwind CSS Progress

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

Class Name
Type
Description
progressComponentBase class for progress container component.
progress-barComponentBase class for progress bar component.
progress-stepComponentBase class for progress steps.
progress-verticalModifierAligns the progress bar vertically.
progress-labelModifierCreates the basic variant for floating labels.
progress-neutralModifierAdds ’neutral’ color to progress bar.
progress-primaryModifierAdds ‘primary’ color to progress bar.
progress-secondaryModifierAdds ‘secondary’ color to progress bar.
progress-accentModifierAdds ‘accent’ color to progress bar.
progress-infoModifierAdds ‘info’ color to progress bar.
progress-successModifierAdds ‘success’ color to progress bar.
progress-warningModifierAdds ‘warning’ color to progress bar.
progress-errorModifierAdds ’error’ color to progress bar.
progress-stripedModifierAdds striped background to progress bars.
progress-animatedModifierAdds animation to striped bars.
progress-indeterminateModifierUsed for progress bars without specific value.

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 width 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 height documentation for more info.

Variants

With custom height

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

With labels (Horizontal)

Utilize labels for presenting progress information.

Labels within

Embedding values directly into the progress-bar will display them within the bars.

Labels at end

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

With title label

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

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.

With labels (Vertical)

Use the labels to showcase progress for vertical bars.

In center

Use below given examples to showcase labels within squared progress bars in center.

At top

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

With labels & title

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

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.

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 border radius 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.

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.