'use client'; import { useState, useEffect } from 'react'; interface CircularProgressProps { value: number; size?: number; strokeWidth?: number; color?: string; label?: string; showValue?: boolean; } function CircularProgress({ value, size = 120, strokeWidth = 8, color = '#3b82f6', label, showValue = true }: CircularProgressProps) { const [animatedValue, setAnimatedValue] = useState(0); const radius = (size - strokeWidth) / 2; const circumference = 2 * Math.PI * radius; const offset = circumference - (animatedValue / 100) * circumference; useEffect(() => { const timer = setTimeout(() => setAnimatedValue(value), 100); return () => clearTimeout(timer); }, [value]); return (

{/* Center Content */}

{showValue && ( {Math.round(animatedValue)}% )} {label && {label}}

); } export default function ProgressCircularDemo() { const stats = [ { value: 85, label: 'Performance', color: '#10b981' }, { value: 72, label: 'Accessibility', color: '#3b82f6' }, { value: 68, label: 'Best Practices', color: '#8b5cf6' }, { value: 90, label: 'SEO', color: '#f59e0b' }, ]; return (

Performance Metrics

{/* Main Stats Grid */}

{stats.map((stat, i) => (

))}

{/* Different Sizes */}

다양한 사이즈

{/* Multi-ring Progress */}

멀티 링 프로그레스

{/* Outer Ring */} {/* Middle Ring */} {/* Inner Ring */} {/* Center */}

Overall

); }

Circular Progress

Project Overview

Size Variations