Delphi Design

A progress bar component for showing task completion and loading states.

Code Example

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

// Basic progress bar
<Progress value={60} />

// With variant
<Progress variant="blue" value={75} />

// Vertical orientation
<div className="h-32">
  <Progress orientation="vertical" value={60} className="h-full" />
</div>

// With label
<div className="space-y-2">
  <div className="flex justify-between text-sm">
    <span>Uploading...</span>
    <span>67%</span>
  </div>
  <Progress value={67} />
</div>

API Reference

Prop	Type	Default	Description
`value`	`number`	`0`	Progress value from 0 to 100
`variant`	`"default" \| "blue" \| "gold" \| "danger"`	`"default"`	Color variant
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Direction of the progress bar
`animated`	`boolean`	`false`	Enable smooth transition animation
`indicatorColor`	`string`	-	Custom color for the progress indicator
`backgroundColor`	`string`	-	Custom background color
`className`	`string`	-	Additional CSS classes

Show progress for operations that take more than 1-2 seconds

Provide text labels or percentages for context when helpful

Use appropriate color variants — danger for critical limits, gold for warnings

Ensure progress updates are smooth and not jarring

Use aria-valuenow, aria-valuemin, aria-valuemax for accessibility

Give vertical progress bars a container with explicit height

Use progress bars for indeterminate loading — use a spinner instead

Show progress that jumps backward or resets unexpectedly

Use misleading progress values — be honest about actual progress

Rely solely on color to convey meaning — add text labels