Progress indicator components

FREE

Free and open-source React progress indicator components built for modern applications and websites. These progress indicators are built using React Aria and styled with Tailwind CSS.

Installation

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

npx untitledui@latest 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%

API reference

CircleProgressBar

Import CircleProgressBar from @/components/base/progress-indicators/simple-circle. Renders a <div> element.

CircleProgressBar props
PropTypeDefaultDescription
value* (required)number—How far along the progress is. Its position between min and max sets the length of the filled arc and the percentage shown in the middle of the circle.
min00Lower bound of the range value is measured against.
max100100Upper bound of the range value is measured against.

ProgressBar

A progress bar component that displays the value text in various configurable layouts.

Import ProgressBar from @/components/base/progress-indicators/progress-indicators.

ProgressBar props
PropTypeDefaultDescription
value* (required)number—The current value of the progress bar.
labelPosition
"right""bottom""top-floating""bottom-floating"
—Specifies the layout of the text relative to the progress bar.
  • right: Text is displayed to the right of the progress bar.
  • bottom: Text is displayed below the progress bar, aligned to the right.
  • top-floating: Text is displayed in a floating tooltip above the progress indicator.
  • bottom-floating: Text is displayed in a floating tooltip below the progress indicator.
minnumber0The minimum value of the progress bar.
maxnumber100The maximum value of the progress bar.
classNamestring—Optional additional CSS class names for the progress bar container.
progressClassNamestring—Optional additional CSS class names for the progress bar indicator element.
valueFormatter((value: number, valueInPercentage: number) => string | number)—Optional function to format the displayed value. It receives the raw value and the calculated percentage.

ProgressBarBase

A basic progress bar component.

Import ProgressBarBase from @/components/base/progress-indicators/progress-indicators. Renders a <div> element.

ProgressBarBase props
PropTypeDefaultDescription
value* (required)number—The current value of the progress bar.
minnumber0The minimum value of the progress bar.
maxnumber100The maximum value of the progress bar.
classNamestring—Optional additional CSS class names for the progress bar container.
progressClassNamestring—Optional additional CSS class names for the progress bar indicator element.
valueFormatter((value: number, valueInPercentage: number) => string | number)—Optional function to format the displayed value. It receives the raw value and the calculated percentage.

ProgressBarCircle

Import ProgressBarCircle from @/components/base/progress-indicators/progress-circles. Renders a <div> element.

ProgressBarCircle props
PropTypeDefaultDescription
value* (required)number—How far along the progress is. Its position between min and max sets the length of the filled arc and the percentage shown in the middle.
size* (required)
"xxs""xs""sm""md""lg"
—Sets the radius and stroke width of the circle, and the type scale of the value and label inside it.
minnumber0Lower bound of the range value is measured against.
maxnumber100Upper bound of the range value is measured against.
labelstring—Caption for the progress, shown above the value inside the circle — or below the circle at the xxs size, where there is no room for it.
valueFormatter((value: number, valueInPercentage: number) => string | number)—Formats the text shown in the middle of the circle. Receives the raw value and the percentage it works out to. Without it the percentage is shown with a % suffix.

ProgressBarHalfCircle

Import ProgressBarHalfCircle from @/components/base/progress-indicators/progress-circles. Renders a <div> element.

ProgressBarHalfCircle props
PropTypeDefaultDescription
value* (required)number—How far along the progress is. Its position between min and max sets the length of the filled arc and the percentage shown in the middle.
size* (required)
"xxs""xs""sm""md""lg"
—Sets the radius and stroke width of the circle, and the type scale of the value and label inside it.
minnumber0Lower bound of the range value is measured against.
maxnumber100Upper bound of the range value is measured against.
labelstring—Caption for the progress, shown above the value inside the circle — or below the circle at the xxs size, where there is no room for it.
valueFormatter((value: number, valueInPercentage: number) => string | number)—Formats the text shown in the middle of the circle. Receives the raw value and the percentage it works out to. Without it the percentage is shown with a % suffix.

FAQs

Please refer to our frequently asked questions page for more.

ProgressBar (and the simpler ProgressBarBase) is in progress-indicators.tsx, and ProgressBarCircle and ProgressBarHalfCircle are in progress-circles.tsx. Add them with the install command on this page: npx untitledui@latest add progress-indicators progress-circles.

Set labelPosition on ProgressBar to "right", "bottom", "top-floating" or "bottom-floating". The floating options show the value in a small tooltip that follows the fill. Leave out labelPosition to render the bar without text.

Pass a valueFormatter function. It receives the raw value and the calculated percentage, and returns the string or number to display. Without it, the bar shows the rounded percentage, such as 40%.

Yes. Set min and max, which default to 0 and 100, and the components calculate the percentage from value. The value isn't clamped, so keep it within that range.

ProgressBarCircle and ProgressBarHalfCircle require a size prop: "xxs", "xs", "sm", "md" or "lg". An optional label renders above the value inside the circle, except at "xxs", where it renders below the circle.

On ProgressBar, className styles the track (h-2 by default) and progressClassName styles the fill (bg-fg-brand-primary by default). The circle components don't accept a className, so change their stroke classes in your copy of the file.

Each one renders an element with role="progressbar" and aria-valuenow, aria-valuemin and aria-valuemax. The components don't accept extra props, so if you need an accessible name, add aria-label or aria-labelledby to that element in your copy of the file.

Mobile app store buttonsQR codes