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

'use client';
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 CustomSizes() {
	const value = useSampleValue();
	return (
		<div className="relative flex gap-6 min-h-screen w-full items-center justify-center">
			<CircularProgress value={value} className="size-24 text-xl" strokeWidth={10} />
			<CircularProgress value={value} className="size-36 text-2xl font-medium" strokeWidth={11} />
			<CircularProgress value={value} className="size-48 text-3xl font-semibold" strokeWidth={12} />
			<CircularProgress value={value} className="size-60 text-4xl font-bold" strokeWidth={13} />
		</div>
	);
}