Progress Bar

Displays the status of a task that takes a long time.

Overview

The Progress Bar component provides visual feedback for operations that take time to complete. It supports determinate progress (known completion percentage), indeterminate progress (unknown duration), and customizable labels.

tsx

import { ProgressBar } from "@rogo-technologies/ui/progress-bar"

<ProgressBar value={45} label="Uploading file" />

Basic

A simple progress bar with a label and percentage value.

Export data

tsx

<ProgressBar value={45} label="Export data" />

Sizes

Use the size prop to control the progress bar height and width. The default size is md.

Size	Track Height	Width	Use Case
`sm`	4px (h-1)	128px	Inline indicators, compact UI
`md`	8px (h-2)	192px	Default—modals, cards
`lg`	12px (h-3)	256px	Full-width sections, prominent displays

Small

Medium

Large

tsx

<ProgressBar value={30} label="Small" size="sm" />
<ProgressBar value={60} label="Medium" size="md" />
<ProgressBar value={80} label="Large" size="lg" />

Without Label

Omit the label prop for a minimal progress bar when context is provided elsewhere.

tsx

<ProgressBar value={65} />

Without Value

Use showValue={false} to hide the percentage when exact progress is less important than visual feedback.

Processing...

tsx

<ProgressBar value={75} label="Processing..." showValue={false} />

Indeterminate

Set value={null} to show an indeterminate progress bar when the total progress is unknown. The indicator will pulse to show activity.

tsx

<ProgressBar value={null} label="Loading..." />

States

Common progress states from not started to completion.

Not started

In progress

Completed

Indeterminate

Interactive

An interactive example demonstrating controlled progress state.

Uploading files...

tsx

const [progress, setProgress] = useState(0)

useEffect(() => {
  const timer = setInterval(() => {
    setProgress((prev) => (prev >= 100 ? 0 : prev + 10))
  }, 500)
  return () => clearInterval(timer)
}, [])

<ProgressBar value={progress} label="Uploading" />

Props

Prop	Type	Default	Description
`value`	`number \| null`	—	Progress value (0-100). Use `null` for indeterminate.
`label`	`string`	—	Label text displayed above the track.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the progress bar.
`showValue`	`boolean`	`true`	Whether to show the percentage value.
`className`	`string`	—	Additional CSS classes for the root.
`trackClassName`	`string`	—	Additional CSS classes for the track.
`indicatorClassName`	`string`	—	Additional CSS classes for the indicator.
`labelClassName`	`string`	—	Additional CSS classes for the label.
`valueClassName`	`string`	—	Additional CSS classes for the value.

Usage Guidelines

Do

Use determinate progress when you can calculate completion percentage
Use indeterminate progress for operations with unknown duration
Provide a descriptive label explaining what's in progress
Show progress bars for operations taking longer than 1 second

Don't

Don't use progress bars for very short operations—use loading spinners instead
Don't show multiple progress bars for the same operation
Don't let progress go backwards unless representing a genuine state change
Don't use progress bars without any context (label or surrounding UI)

PreviousPopover

NextRadio Group