Tailwind CSS Progress

Height

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

Label at the end

Place label at the end of a progress.

Title label

Use with title.

Floating label

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

Color variants

Change the appearance of individual progress bars.

Multiple bars

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

Straight bar

Bar with 0 radius, but rounded progress.

Vertical progress

A base form of vertical progress.

Steps

Progress bars with steps.

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.

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).

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.