Progress indicator components

Learn how to use the progress indicator components in your project.

Installation

You can add this progress indicator component using our CLI or manually:

npx untitledui add progress-indicators progress-circles

Progress indicator examples

Below are examples and variations of this progress indicator component:

Default

Text right

40%

Text bottom

40%

Text top floating

40%

Text bottom floating

40%

Circle progress bar

40%
40%
40%

Circle progress bar label

40%
Users
Active users
40%
Active users
40%

Half circle progress bar

40%
40%
40%

Half circle progress bar label

40%
Users
Active users
40%
Active users
40%
TooltipsSliders