Progress Bar
A sleek Progress Bar component, designed with TailwindCSS, offering clear, responsive, and visually appealing progress indicators.
Example
example.tsx
'use client';
import { useEffect, useState } from 'react';
export function Progress() {
const [progress, setProgress] = useState(15);
useEffect(() => {
const timer = setInterval(() => {
setProgress((prev) => Math.min(100, prev + 10));
}, 1500);
return () => clearInterval(timer);
}, []);
return (
<div className='bg-gray-900 rounded-full flex items-start w-full md:w-1/2 h-3 md:h-5 overflow-hidden'>
<div
className={`h-full w-full bg-[#1565C0] rounded-full transition-all`}
style={{ transform: `translateX(-${100 - progress}%)` }}
></div>
</div>
);
}
Text Progress Bar
A concise Text Progress Bar component with integrated progress updates, using TailwindCSS for clear and responsive tracking of progress.
Example
2%
example.tsx
'use client';
import { useEffect, useState } from 'react';
export function Progress() {
const [progress, setProgress] = useState(2);
useEffect(() => {
const timer = setInterval(() => {
setProgress((prev) => Math.min(100, prev + 10));
}, 800);
return () => clearInterval(timer);
}, []);
return (
<div className='relative bg-gray-800 rounded-full flex items-start w-full md:w-1/2 h-3 md:h-5 overflow-hidden'>
<div
className={`h-full w-full bg-[#4BB543] rounded-full transition-all`}
style={{ transform: `translateX(-${100 - progress}%)` }}
>
</div>
<span className='absolute text-white font-bold text-xs md:text-sm left-1/2'>{progress}%</span>
</div>
);
}
