1. Components
  2. Progress

Components

Tailwind CSS Progress

Tailwind CSS progress bar reflects the completion of a task or a process. Explore horizontal, circular or vertical bar component with various label styles.

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

Place label at the end of a progress.

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

Title label

Use with title.

Progress title

25%

Progress title

50%

Progress title

75%

Progress title

100%

Floating label

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

Progress bars with steps.

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

Circular progress

Set progress with stroke-dashoffset values between 0 to 100, lower values show higher progress (e.g., stroke-dashoffset="65" displays 35%). Fills counter-clockwise and requires manually update percentage text.

35%

Gauge progress

To adjust the percentage, change the first number in the progress circle's stroke-dasharray where it's max value 75 for gauge and 50 for half circle gauge. For example, for 50% progress, use stroke-dasharray="37.5 100" (50% of 75 is 37.5).

50 Score
75 Score

Customize visual look by adjusting stroke-width and color, text values. You may also adjust the stroke-linecap to change the shape of the gauge.

25 mph
75 Score
50 Average