1
0
Fork 0
freesewing/sites/shared/components/animations/loading-bar.mjs
2023-07-28 20:28:27 +02:00

16 lines
483 B
JavaScript

export const LoadingBar = ({ duration = 1000, color = 'primary' }) => {
const [started, setStarted] = useState(false)
useEffect(() => {
setTimeout(() => setStarted(true), 100)
}, [])
return (
<div className={`w-full bg-base-200 rounded-full h-2.5 mb-4 bg-${color} bg-opacity-30`}>
<div
className={`bg-${color} h-2.5 rounded-full transition-all ${
started ? 'w-full' : 'w-0'
} duration-[${duration}ms]`}
></div>
</div>
)
}