Progress Indicator
Linear, circular, and half-circle progress indicators with multiple text positions, sizes, and colors.
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. |