[CSS] next + tailwind로 프로그레스 바 만들기

next14 + tailwind

 

가로 프로그레스 바

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

const isRunAnimation = useMemo(() => {
    if (step !== _step) {
      setStep(step);
      return true;
    } else {
      return false;
    }
}, [step]);

 

<div className="z-[501] bg-white px-10 py-4">
  <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}%` }}
    />
    
    {!isCompleted && (
      <div
        style={{
          animation: `${animation.pulse} 0.7s both`,
          animationPlayState: isRunAnimation ? "running" : "paused",
        }}>
          <BasicTooltip
            isVisible={true}
            description="+1,500원"
            caretVerticalPosition="top"
            caretHorizontalPosition="right"
            positionOption="right-[-20px] top-[15px]"
          />
      </div>
    )}
  </div>
</div>

 

재사용가능한 컴포넌트로 만들기 위해서 step값을 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>