Progress Bar Component

Variants

Default30%

Success50%

Warning70%

Error90%

Sizes

Small

Medium

Large

Interactive Example

Interactive Progress30%

Current: 30%

Usage Examples

Basic Progress Bar

import { ProgressBar } from "@/components/progress-bar";

<ProgressBar value={50} />

Progress Bar with Label and Value

<ProgressBar
  value={75}
  label="Upload Progress"
  showValue
/>

Progress Bar with Different Variants

<ProgressBar value={30} variant="default" label="Default" showValue />
<ProgressBar value={50} variant="success" label="Success" showValue />
<ProgressBar value={70} variant="warning" label="Warning" showValue />
<ProgressBar value={90} variant="error" label="Error" showValue />

Progress Bar with Different Sizes

<ProgressBar value={25} size="sm" label="Small" />
<ProgressBar value={50} size="md" label="Medium" />
<ProgressBar value={75} size="lg" label="Large" />