1. Components
  2. Progress

Components

Tailwind CSS Progress

A progress bar displays the status of a given process.

Example

Determinate progress bars fill the container from 0 to 100%. This reflects the progress of the process.

Height

We only set a height value on the progress, so if you change that value the inner progress bar will automatically resize accordingly.

Within progress bar

Add labels to your progress bars by placing text within the progress bar.

25%
50%
75%
100%

Label at the end New

Place label at the end of a progress.

25%
50%
75%
100%
80%
100%

Title label New

Use with title.

Progress title

25%

Progress title

50%

Progress title

75%

Progress title

100%

Floating label New

Label floating with the number on top of the progress bar.

25%
50%
75%
100%

Color variants

Change the appearance of individual progress bars.

Multiple bars

Include multiple progress bars in a progress component if you need.

No radius

0 border radius example.

Straight bar

Bar with 0 radius, but rounded progress.

Vertical progress

A base form of vertical progress.

Steps New

Progress bars with steps.

50%
50%
25%
25%
100%
100%

Circular progress New

Circular progress.

72%