import React, { useState, useEffect } from "react"; function Progress({ percent, deskTop, direction = "float-left" }) { const [delayPercent, setDelayPercent] = useState(0); useEffect(() => { setTimeout(() => { setDelayPercent(() => percent); }, 1000); }, [percent]); return ( <div className={`flex-1 ${ deskTop ? "h-3" : "h-1.5" } rounded-full overflow-hidden my-3 bg-blueC0 bg-opacity-10`} > <div className={`h-full bg-blueC0 transition-all ${direction} duration-500 rounded-full`} style={{ width: delayPercent + "%" }} ></div> </div> ); } export default Progress;