Circular Progress

Docs

Circular Progress

Displays an ongoing process or activity in a circular format.

Open in

45%

With Text

Without Text

Installation

Usage

import { CircularProgress } from "@/components/ui/circular-progress";

<CircularProgress value={75} />

Examples

Basic

Open in

45%

With Text

Without Text

You can hide the percentage text by using the hideText prop:

<CircularProgress value={75} hideText />

Custom Stroke Width

You can customize the thickness of the progress ring:

<CircularProgress value={75} strokeWidth={8} />

Dynamic Progress

You can update the value programmatically to show progress:

const [progress, setProgress] = useState(0);
 
useEffect(() => {
  const timer = setInterval(() => {
    setProgress((prevProgress) => {
      const newProgress = prevProgress + 5;
      if (newProgress >= 100) {
        clearInterval(timer);
        return 100;
      }
      return newProgress;
    });
  }, 500);
 
  return () => {
    clearInterval(timer);
  };
}, []);
 
return <CircularProgress value={progress} />;

Props

Prop	Type	Default	Description
`value`	`number`	-	The progress value (0-100)
`strokeWidth`	`number`	`4`	The width of the progress circle stroke
`hideText`	`boolean`	`false`	Whether to hide the percentage text
`className`	`string`	-	Additional CSS class name

Checkbox Collapsible

Contribute