loadingbar 만들기!

api 데이터를 받는데 시간이 오래걸려 loading중일때 보여줄 수 있는 페이지를 구현해야겠다고 생각했다.

 

기존에는 단순 이미지와 텍스트로 구현을 해두었었는데 

너무 대충 만든 사이트라는 느낌을 주고 있는 것 같았다.

 

그래서 loadingbar를 만들어보자! 라는 생각으로 만들었다

 

import { useEffect, useState } from 'react';
import styled from 'styled-components';

export default function Loading() {
  const [filled, setFilled] = useState(0);

  useEffect(() => {
    if (filled < 100) {
      setTimeout(() => setFilled((prev) => (prev += 5)), 50);
    }
  }, [filled]);

  return (
    <LoadingBarBox>
      <ProgressBar>
        <div
          style={{
            height: '100%',
            width: `${filled}%`,
            backgroundColor: '#febe98',
            transition: 'width 0.6s'
          }}
        ></div>
        <ProgressPercent>{filled}%</ProgressPercent>
      </ProgressBar>
    </LoadingBarBox>
  );
}

const LoadingBarBox = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
`;

const ProgressBar = styled.div`
  position: relative;
  width: 500px;
  height: 60px;
  border-radius: 2rem;
`;

const ProgressPercent = styled.span`
  font-weight: 900;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #eee;
  text-shadow: -1px 0 #555, 0 1px #555, 1px 0 #555, 0 -1px #555;
`;

 

 

css부분은 설명을 건너 뛰고

 

0~100% 까지 숫자를 증가시켜줄 useState를 하나 만들어두고 

  const [filled, setFilled] = useState(0);

 

loading 창이 실행될 때 자동으로 바로 실행될 수 있도록 useEffect안에서 함수를 구현!

  useEffect(() => {
    if (filled < 100) {
      setTimeout(() => setFilled((prev) => (prev += 5)), 50);
    }
  }, [filled]);

 

filled가 100 이하일 때

setTimeput 매서드를 이용해 setFilled에 값을 세팅해주는데 0부터 5씩 증가 할 수 있도록 구현! 

뒤에 50은 50밀리세컨즈 속도로 5씩 증가하게 된다!