Progress

A progress bar component for displaying completion status.

Import

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

Basic Usage

<Progress value={75} />

Props

Variants

<Progress value={50} variant="primary" />
<Progress value={75} variant="success" />
<Progress value={30} variant="warning" />
<Progress value={90} variant="danger" />

Sizes

<Progress value={50} size="sm" />  {/* 4px height */}
<Progress value={50} size="md" />  {/* 8px height (default) */}
<Progress value={50} size="lg" />  {/* 12px height */}

With Label

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

With Value Display

<Progress value={75} showValue />
<Progress value={75} label="Storage Used" showValue />

Animated

<Progress value={50} animated />

Custom Max

<Progress value={3} max={5} showValue />  {/* Shows 60% */}

Use Cases

File Upload

'use client';
import { useState, useEffect } from 'react';
import { Progress, Card } from '@/components/ui';

export function FileUpload() {
  const [progress, setProgress] = useState(0);
  const [uploading, setUploading] = useState(false);

  const handleUpload = async (file) => {
    setUploading(true);
    // Simulated upload progress
    for (let i = 0; i <= 100; i += 10) {
      setProgress(i);
      await new Promise(r => setTimeout(r, 200));
    }
    setUploading(false);
  };

  return (
    <Card className="p-6">
      <Progress
        value={progress}
        label="Uploading file..."
        showValue
        animated={uploading}
        variant={progress === 100 ? 'success' : 'primary'}
      />
    </Card>
  );
}

Storage Usage

export function StorageUsage({ used, total }) {
  const percentage = (used / total) * 100;
  const variant = percentage > 90 ? 'danger' : percentage > 70 ? 'warning' : 'primary';

  return (
    <Progress
      value={used}
      max={total}
      variant={variant}
      label="Storage"
      showValue
    />
  );
}

Step Progress

export function StepProgress({ currentStep, totalSteps }) {
  return (
    <div className="space-y-2">
      <div className="flex justify-between text-sm">
        <span>Step {currentStep} of {totalSteps}</span>
      </div>
      <Progress value={currentStep} max={totalSteps} variant="success" />
    </div>
  );
}

Loading Bar

export function LoadingBar() {
  return (
    <Progress
      value={100}
      size="sm"
      animated
      className="w-full"
    />
  );
}

Color Reference