Progress
StableDisplays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Examples
Basic Usage
tsx
<Progress value={66} />Neon Variants
tsx
<div className="space-y-4">
<Progress value={60} variant="neon" />
<Progress value={45} variant="neonPurple" />
<Progress value={80} variant="neonGreen" />
<Progress value={30} variant="destructive" />
</div>Indeterminate State
tsx
<Progress isIndeterminate variant="neon" />API Reference
| Property | Description | Type | Default |
|---|---|---|---|
| value | The progress value. | number | - |
| variant | Visual style. | "default" | "neon" | "neonPurple" | "neonGreen" | "destructive" | - |
| size | Thickness of the bar. | "sm" | "md" | "lg" | - |
| isIndeterminate | Shows an animated infinite loading state. | boolean | - |