Progress Circle

A circular progress indicator component that visually displays a percentage value with smooth animations.

75%

Usage

import { useState } from 'react';
import ProgressCircle from '@/components/ProgressCircle';

export default function MyPage() {
  const [progress, setProgress] = useState(75);
  
  return (
    <ProgressCircle 
      percentage={progress}
      size={100}
      thickness={10}
      primaryColor="#3b82f6"
      secondaryColor="#dbeafe"
    />
  );
}

Examples

Basic Progress Circle

A simple progress circle with default styling.

25%
50%
75%
100%
<div className="flex space-x-4">
  <ProgressCircle percentage={25} />
  <ProgressCircle percentage={50} />
  <ProgressCircle percentage={75} />
  <ProgressCircle percentage={100} />
</div>

Custom Size and Thickness

Progress circles with custom sizes and thicknesses.

65%
65%
65%
<div className="flex items-center space-x-6">
  <ProgressCircle 
    percentage={65} 
    size={60} 
    thickness={4}
  />
  <ProgressCircle 
    percentage={65} 
    size={100} 
    thickness={8}
  />
  <ProgressCircle 
    percentage={65} 
    size={140} 
    thickness={12}
  />
</div>

Custom Colors

Progress circles with custom color schemes.

80%
80%
80%
80%
<div className="flex space-x-4">
  <ProgressCircle 
    percentage={80} 
    primaryColor="#3b82f6" 
    secondaryColor="#dbeafe"
  />
  <ProgressCircle 
    percentage={80} 
    primaryColor="#ef4444" 
    secondaryColor="#fee2e2"
  />
  <ProgressCircle 
    percentage={80} 
    primaryColor="#10b981" 
    secondaryColor="#d1fae5"
  />
  <ProgressCircle 
    percentage={80} 
    primaryColor="#8b5cf6" 
    secondaryColor="#ede9fe"
  />
</div>