Circular Progress with Custom Color

Component 14

About

A circular (radial) progress indicator rendered with SVG that supports custom ring colors, sizes, stroke widths, and a centered percentage label.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import CircularProgress from "@/components/ui/progress-10";
import { Slider } from "@/components/ui/slider";

export default function CircularProgressColorDemo() {
  const [progress, setProgress] = React.useState([13]);

  return (
    <div className="mx-auto flex w-full max-w-xs flex-col items-center">
      <div className="flex items-center gap-1">
        <CircularProgress
          className="stroke-indigo-500/25"
          labelClassName="text-xl font-bold"
          progressClassName="stroke-indigo-600"
          renderLabel={(progress) => `${progress}%`}
          showLabel
          size={120}
          strokeWidth={10}
          value={progress[0]}
        />
        <CircularProgress
          className="stroke-orange-500/25"
          labelClassName="text-xl font-bold"
          progressClassName="stroke-orange-600"
          renderLabel={(progress) => `${progress}%`}
          showLabel
          size={120}
          strokeWidth={10}
          value={progress[0]}
        />
      </div>
      <Slider
        className="mt-6"
        defaultValue={progress}
        max={100}
        onValueChange={setProgress}
        step={1}
      />
    </div>
  );
}