Progress

Cards 24

About

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

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

Code

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

Usage.tsx

'use client';

import { useEffect, useState } from 'react';
import { ProgressCircle } from '@/components/ui/progress';

export default function Component() {
  const [cpuUsage, setCpuUsage] = useState(0);

  useEffect(() => {
    // CPU usage simulation
    const cpuTimer = setInterval(() => {
      setCpuUsage((prev) => {
        const target = 30 + Math.sin(Date.now() / 3000) * 20 + Math.random() * 15;
        return prev + (target - prev) * 0.1;
      });
    }, 100);

    return () => {
      clearInterval(cpuTimer);
    };
  }, []);

  return (
    <div className="flex items-center justify-center">
      <div className="flex flex-col items-center gap-3">
        <ProgressCircle
          value={cpuUsage}
          size={80}
          strokeWidth={6}
          className="text-fuchsia-500"
          indicatorClassName="text-fuchsia-500"
        >
          <div className="text-center">
            <div className="text-base font-bold">{Math.round(cpuUsage)}%</div>
            <div className="text-xs text-muted-foreground">CPU</div>
          </div>
        </ProgressCircle>
        <span className="text-xs text-muted-foreground">Processor Usage</span>
      </div>
    </div>
  );
}