Progress

Displays an indicator showing the completion progress of a task. Built on top of Radix UI Progress primitive.

Installation

npm install @darksnow-ui/progress

Peer Dependencies

npm install react react-dom

Usage

import { Progress } from "@darksnow-ui/progress"

export function ProgressExample() {
  return <Progress value={60} className="w-full" />
}

Props

| Prop | Type | Default | Description | |-----------|-------------------|---------|----------------------------------| | value | number | - | Progress value (0-100) | | max | number | 100 | Maximum value | | className | string | - | Additional CSS classes |

Examples

Basic Progress

<Progress value={60} />

With Animation

function AnimatedProgress() {
  const [progress, setProgress] = useState(0)

  useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])

  return <Progress value={progress} className="w-[60%]" />
}

Different Sizes

<div className="space-y-4">
  <Progress value={60} className="h-1" />
  <Progress value={60} className="h-2" />
  <Progress value={60} className="h-4" />
</div>

Custom Colors

<Progress 
  value={60} 
  className="[&>div]:bg-green-500" 
/>

Accessibility

• Uses proper ARIA attributes
• Screen reader accessible
• Keyboard navigation support

Styling

The Progress component uses these default styles:

• Background: bg-theme-accent/20
• Indicator: bg-theme-accent
• Height: h-2
• Border radius: rounded-full

Related Components

• Slider - Input range control
• Skeleton - Loading placeholders