Progress

Linear and circular progress indicators.

loadingprogressstatus

Import

import { Progress } from "@/components/ui";

Basic Usage

Progress Preview

Default (65%)

65%

Success (100%)

100%

Warning (40%)

40%

Indeterminate

Code

tsx

<Progress value={60} />

Colors

Different color options

1<div className="space-y-4">
2  <Progress value={60} color="primary" />
3  <Progress value={60} color="success" />
4  <Progress value={60} color="warning" />
5  <Progress value={60} color="destructive" />
6</div>

Sizes

Available in multiple sizes

1<div className="space-y-4">
2  <Progress value={60} size="sm" />
3  <Progress value={60} size="md" />
4  <Progress value={60} size="lg" />
5</div>

With Value Display

Show percentage

1<Progress value={75} showValue />

Circular Progress

Circular variant

1<div className="flex items-center gap-4">
2  <Progress variant="circular" value={25} size="sm" />
3  <Progress variant="circular" value={50} size="md" />
4  <Progress variant="circular" value={75} size="lg" showValue />
5</div>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring