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 CustomStyles() {
	const value = useSampleValue();
	return (
		<div className="relative flex min-h-screen w-full items-center justify-center space-x-5 bg-linear-to-br from-violet-500 to-fuchsia-500">
			<CircularProgress
				variant="gaped"
				value={value}
				className="size-48 text-4xl font-bold"
				strokeWidth={12}
				primaryColor="rgb(255, 255, 255)"
				secondaryColor="rgb(255, 255, 255, 0.25)"
			/>
		</div>
	);
}