Progress Card

Cards 101

About

Animated Progress Card Description: A card component designed to display a specific goal or statistic. It features a title, an icon, an animated progress bar, and customizable labels to track progress over time. The card is fully responsive and adapts to both light and dark themes using shadcn/ui's CSS variables.

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

Code

How Progress Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AnimatedProgressCard } from "@/components/ui/progress-card";
import { Timer, Code2 } from "lucide-react"; // Example icons

/**
 * A demo page to showcase the AnimatedProgressCard component.
 */
export default function AnimatedProgressCardDemo() {
  return (
    <div className="flex min-h-screen w-full flex-col items-center justify-center gap-8 bg-background p-4">
      {/* Example 1: Running Progress (from the image) */}
      <AnimatedProgressCard
        title="Running last week"
        icon={<Timer className="h-5 w-5 text-primary-foreground" />}
        progressLabel="Your Progress"
        progressSubLabel="Since 20 days ago"
        currentValue={152}
        maxValue={160}
      />
    </div>
  );
}