Progress

Component 5

About

Here is Progress component

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 { Progress } from "@ark-ui/react/progress";

export default function CircularBasic() {
  return (
    <Progress.Root
      defaultValue={65}
      className="flex items-center justify-center"
    >
      <Progress.Circle className="w-16 h-16 [--size:64px] [--thickness:4px]">
        <Progress.CircleTrack
          className="stroke-gray-200 dark:stroke-gray-700"
          strokeWidth="4"
          fill="none"
        />
        <Progress.CircleRange
          className="stroke-blue-600 dark:stroke-blue-500 transition-all duration-300 ease-out"
          strokeWidth="4"
          fill="none"
          strokeLinecap="round"
        />
      </Progress.Circle>
    </Progress.Root>
  );
}