Animated Radial Chart

This is a dynamic radial progress chart component that animates a semi-circular arc to visually represent a percentage value, using smooth framer-motion transitions, SVG gradients, and drop shadows for a polished 3D feel. Perfect for dashboards, analytics UIs, or progress visualizations where you want to display performance, goal completion, or system usage in a clean and engaging format.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Radial Chart to your project and fits it to your theme.

import { AnimatedRadialChart } from "@/components/ui/animated-radial-chart";

const settings = {
  value: 74,
  size: 300,
  strokeWidth: 18,
  duration: 2,
  showLabels: true,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen flex items-center justify-center">
      <AnimatedRadialChart
        value={s.value}
        size={s.size}
        strokeWidth={s.strokeWidth}
        duration={s.duration}
        showLabels={s.showLabels}
      />
    </div>
  );
}