import { motion, useAnimation } from "framer-motion"; import { RefreshCcw } from "lucide-react"; import { useEffect, useState } from "react"; type StripedProgressbarProps = { value: number, max: number, numberOfTiles: number, color: string, offColor: string, animated: boolean } export const StripedProgressbarExample = () => { const [value, setValue] = useState(0); const [finished, setFinished] = useState(false); useEffect(() => { const interval = setInterval(() => { setValue(prev => { const nextValue = prev + 1; if (nextValue > 200) { clearInterval(interval); setFinished(true); return prev; } return nextValue; }); }, 20); return () => clearInterval(interval); }, [finished]); const resetProgress = () => { setFinished(false); setValue(0); }; return (

{finished && ( )}

); }; const StripedProgressbar = ({ value, max, numberOfTiles, color, offColor, animated }: StripedProgressbarProps) => { const controls = useAnimation(); useEffect(() => { if (value === max && animated) { controls.start({ scale: 1.2, transition: { duration: 0.5 }, }).then(() => { controls.start({ scale: 1, }); }); } }, [value, max, controls]); function createBar() { let arr = []; for (let i = 1; i <= numberOfTiles!; i++) { arr.push({ breakpoint: (max! / numberOfTiles!) * i }); } return arr; } const elements = createBar(); return (

{elements.map((e, i) => ( ))}

) }

Progress

Gradient Progressbar

Striped Progressbar

Wave Progressbar