Circular Progress

This CircularProgress component shows a smooth, animated ring to display progress in a clean, modern style. You can choose between a full circle or a gaped version, customize colors, stroke, and see the percentage right in the center!

EfferdbyShaban Haider

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

function useSampleValue(defaultValue: number = 0) {
  const [value, setValue] = React.useState(defaultValue);

  React.useEffect(() => {
    const handleIncrement = (prev: number) => {
      if (prev === 100) {
        return 0;
      }
      return prev + 10;
    };
    setValue(handleIncrement);
    const interval = setInterval(() => setValue(handleIncrement), 2000);
    return () => clearInterval(interval);
  }, []);

  return value;
}

export default function GappedDemo() {
	const value = useSampleValue();
	return (
		<div className="flex min-h-screen w-full items-center justify-center">
			<CircularProgress value={value} variant='gaped' />
		</div>
	);
}