CSS & tailwind - 프로그레스 바 만들기

next14 + tailwind

가로 프로그레스 바

const [_step, setStep] = useState(0);

  // 단계가 지날때마다 애니메이션 되도록
const isRunAnimation = useMemo(() => {
    if (step !== _step) {
      setStep(step);
      return true;
    } else {
      return false;
    }
}, [step]); 

<div className="relative h-1 rounded-full bg-gray-300">
 	<div
	className="h-full rounded-lg bg-orange-700 transition-all duration-300"
	style={{ width: `${step * 23}%` }} />
</div>

 

컴포넌트르로 만들어서 사용하기 위해서 useState부분을 props로 받아서 사용 중!

 

실제 결과 값

 

세로 프로그레스바

 <div className="relative h-12 w-1.5 rounded-[50px] bg-gray-200">
	<div
    	className={cx(
        "absolute bottom-0 w-full rounded-[50px] transition-all duration-300",
        maxTotalCount && maxTotalCount === info.totalCount ? "bg-orange-900 " : "bg-gray-400")}
		style={{ height: `${maxHeight(info.totalCount)}%`}}
	/>
</div>