Progress

작업의 진행 상태를 시각적으로 표시하는 컴포넌트

Basic Usage

기본적인 프로그레스 바 예시입니다.

tsx

<Progress value={33} />

Different Values

다양한 진행률을 표시할 수 있습니다.

25%

50%

75%

100%

tsx

<Progress value={0} />
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />

Usage

tsx

import { Progress } from '@gpters-internal/ui';

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

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
    }, 500);
    return () => clearInterval(timer);
  }, []);

  return <Progress value={progress} />;
}