Progress

Component 42

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 { ProgressRadial } from '@/components/ui/progress-1';

export default function ProgressRadialDemo() {
  const [taskProgress, setTaskProgress] = useState(0);

  useEffect(() => {
    // Task completion simulation
    const taskTimer = setInterval(() => {
      setTaskProgress((prev) => {
        if (prev >= 100) {
          return 0; // Reset for continuous loop
        }
        return prev + Math.random() * 2 + 0.5; // Random increment 0.5-2.5
      });
    }, 200);

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

  return (
    <div className="flex flex-col items-center gap-3">
      <ProgressRadial
        value={taskProgress}
        size={80}
        startAngle={-90}
        endAngle={180}
        strokeWidth={5}
        indicatorClassName="text-green-500"
        className="text-green-500"
      >
        <div className="text-center">
          <div className="text-base font-bold">{Math.round(taskProgress)}%</div>
          <div className="text-xs text-muted-foreground">Upload</div>
        </div>
      </ProgressRadial>
      <span className="text-xs text-muted-foreground">Upload Status</span>
    </div>
  );
}