Progress Indicator
Linear, circular, and half-circle progress indicators with multiple text positions, sizes, and colors.
Installation
You can add this component using our CLI or manually:
$npx omnira-ui@latest add progress-indicator
Text Right
Default linear bar with percentage on the right.
Text Right
Uploading...
Text Bottom
Percentage displayed below the bar.
Text Bottom
40%
Storage used70%
Text Top Floating
A floating bubble above the bar that follows the fill position.
Top Floating
40%
Progress
75%
Text Bottom Floating
A floating bubble below the bar that follows the fill position.
Bottom Floating
40%
Downloading
60%
Sizes
Three track heights: sm (4px), md (8px), lg (12px).
Sizes
Small
Medium
Large
Colors
Four color options for the fill.
Colors
Lime
Blue
Orange
Red
Circle Progress Bar
Circular progress in five sizes.
Circle
40%
40%
40%
40%
40%
Circle with Label
Circle progress with a descriptive label below the percentage.
Circle Label
40%Users
65%Active
80%Storage
Half Circle Progress Bar
Semi-circular gauge in five sizes.
Half Circle
40%
40%
40%
40%
40%
Half Circle with Label
Semi-circular gauge with a descriptive label.
Half Circle Label
40%Users
65%Active users
80%Active users
Usage
Import the desired progress component.
tsx
import { ProgressBar, ProgressBarCircle, ProgressBarHalfCircle } from "@/components/ui/ProgressBar";
// Linear
<ProgressBar value={40} />
<ProgressBar value={70} textPosition="top-floating" size="lg" color="blue" />
// Circle
<ProgressBarCircle size="sm" value={65} label="Active" />
// Half Circle
<ProgressBarHalfCircle size="md" value={80} label="Storage" />ProgressBar Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current progress value (required). |
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| label | string | — | Optional label above the bar. |
| textPosition | "right" | "bottom" | "top-floating" | "bottom-floating" | "none" | "right" | Where to display the percentage. |
| size | "sm" | "md" | "lg" | "md" | Track height. |
| color | "lime" | "blue" | "red" | "orange" | "lime" | Fill color. |
ProgressBarCircle / ProgressBarHalfCircle Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current progress value (required). |
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| label | string | — | Label below the percentage. |
| size | "xxs" | "xs" | "sm" | "md" | "lg" | "sm" | Circle diameter. |
| color | "lime" | "blue" | "red" | "orange" | "lime" | Arc color. |