Progress

import { Progress } from '@kivora/react';

<Progress value={72} color="primary" />

<Progress value={75} color="primary" />
<Progress value={100} color="success" />
<Progress value={60} color="warning" />
<Progress value={30} color="error" />
<Progress value={50} color="info" />

<Progress value={70} size="xs" />
<Progress value={70} size="sm" />
<Progress value={70} size="md" />
<Progress value={70} size="lg" />
<Progress value={70} size="xl" />

<Progress value={70} radius="none" />
<Progress value={70} radius="sm" />
<Progress value={70} radius="md" />
<Progress value={70} radius="full" />

<Progress animated />

<Progress value={65} label="Upload progress" />

import { useState, useEffect } from 'react';

function UploadProgress() {
  const [progress, setProgress] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          clearInterval(timer);
          return 100;
        }
        return prev + 10;
      });
    }, 500);
    
    return () => clearInterval(timer);
  }, []);
  
  return (
    <div className="space-y-2">
      <div className="flex justify-between text-sm">
        <span>Uploading...</span>
        <span>{progress}%</span>
      </div>
      <Progress 
        value={progress} 
        color={progress === 100 ? 'success' : 'primary'}
        label="File upload progress"
      />
    </div>
  );
}

function Example() {
  const progress = 65;
  
  return (
    <div className="space-y-2">
      <div className="flex justify-between text-sm text-muted-foreground">
        <span>Progress</span>
        <span>{progress}%</span>
      </div>
      <Progress value={progress} color="primary" />
    </div>
  );
}

function LoadingExample() {
  const [loading, setLoading] = useState(true);
  
  return (
    <div className="space-y-2">
      <p className="text-sm">Processing...</p>
      <Progress animated />
    </div>
  );
}