[React] 진행상황 표시바 구현하기(progress bar)

프로젝트 진행 중 progress bar가 필요해서 구현해보았다.

Progress bar란?

화면 상단에서 진행 정도를 볼 수 있도록 표시한 바다
주로 설문이나 회원가입 등 화면에서 사용

코드

progress(진행정도)를 백분율에 맞춰 숫자로 입력하면 그만큼의 진행상황이 표시됨

• progressBar.tsx

import styled from 'styled-components';

interface ProgressBarProps {
    progress: number; 
}

const ProgressBar: React.FC<ProgressBarProps> = ({ progress }) => {
  return (
    <ProgressWrapper>
      <ProgressFill progress={progress} />
    </ProgressWrapper>
  );
};

export default ProgressBar;

const ProgressWrapper = styled.div`
  width: 312px;
  height: 8px;
  background-color:#F1F1F1;
  border-radius: 5px;
`;

const ProgressFill = styled.div<ProgressBarProps>`
  width: ${(props) => props.progress}%; //입력받은 progress 만큼 채우기
  height: 100%;
  background: linear-gradient(90deg, #ABD9FF 20% ,#1A98FF 80%); #그라데이션 효과
  border-radius: 5px;
  transition: width 0.3s ease;
`;

• 사용 예시

<ProgressBar progress={70}/>