Progress Bar

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

Examples

Exporting model

Value

Size

Label

Show value

Rounded

Interactive

Uploading files...

Overview

ProgressBar 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" />;

Usage

Sizes

Size	Track height	Width	Use case
`sm`	4px	128px	Inline indicators, compact UI
`md`	8px	192px	Default: modals, cards
`lg`	12px	256px	Full-width sections, prominent displays

tsx

<ProgressBar value={30} size="sm" />
<ProgressBar value={80} size="lg" />

Indeterminate

Pass value={null} when the duration is unknown, and the indicator pulses to show activity.

tsx

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

Hiding the percentage

tsx

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

Controlled progress

tsx

const [progress, setProgress] = useState(0);

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

API

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.
`rounded`	`boolean`	`false`	Render the track and indicator with fully rounded ends.
`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.

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 a loading spinner 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