[TIL] progress 태그 애니메이션

웹에서 Progress Bar를 구현하는 방식은 아주 다양하다

순수 HTML / HTML5의 progress 태그 / SVG / 외부 라이브러리 등..

 

이 중에 커스텀 제약이 없고 React에서 값 조절이 용이한 HTML5의 progress 태그를 사용해보자!

 

다양한 Progress Bar 예제🔽

progressbar by html, html5, svg

위 예제에서 볼 수 있듯 <progress> 태그에 JavaScript 함수로 애니메이션을 구현할 수 있다

 

[Compose.js]

  const [progress, setProgress] = useState(0);

  const Progress = () => {
    return (
      <progress
        className="compose_state_line_progress"
        value={`${progress}`}
        max="100"></progress>
    );
  };

레이아웃을 만들고 진행률을 나타낼 progress를 선언해준다

 

[Compose.css]

.compose_state_line_progress {
  -webkit-appearance: none;
  flex: 1;
  height: 4px;
}
progress::-webkit-progress-bar {
  background-color: var(--grey-45);
}
progress::-webkit-progress-value {
  background-color: var(--brand-primary);
}

webkit으로 스타일링 해줄 수 있다

 

[Compose.js]

// length: 전체 옵션의 수, select: 선택한 옵션의 수
function ProgressAnimator(length, select) {
    let end = (100 / length) * select;
    let temp = progress;

    function ProgressAnimation() {
      temp += 1;

      if (temp < end) {
        setProgress(temp);
        setTimeout(() => ProgressAnimation(), 1000 / 60);
      } else {
        setProgress(end);
      }
    }

    ProgressAnimation();
}

setTimeout을 활용한 재귀함수로 하나씩 선택하면 게이지가 차는 애니메이션을 구현했다

(예를 들어 5개 중 3개를 진행한다면 Progress Bar의 60%가 찬다)

 

[ComposeStep01.js]

// 전체 옵션의 수
const [lengthNumber, setLengthNumber] = useState(5);

// 선택한 옵션의 수
const [selectNumber, setSelectNumber] = useState(1);

...

props.ProgressAnimator(lengthNumber, selectNumber);
setSelectNumber(selectNumber + 1);

원하는 곳에 매개변수를 넣어서 사용해주자

 

잘 작동한다!