Spinner

로딩 상태를 표시하는 회전 아이콘

Basic Usage

로딩 중임을 나타내는 애니메이션 스피너입니다.

tsx

<Spinner />

Sizes

className으로 크기를 조절할 수 있습니다.

tsx

<Spinner className="size-3" />
<Spinner className="size-4" />
<Spinner className="size-6" />
<Spinner className="size-8" />

With Text

스피너와 텍스트를 함께 사용할 수 있습니다.

로딩 중...

tsx

<div className="flex items-center gap-2">
  <Spinner />
  <span>로딩 중...</span>
</div>

Custom Color

className으로 색상을 변경할 수 있습니다.

tsx

<Spinner className="text-primary" />
<Spinner className="text-destructive" />
<Spinner className="text-muted-foreground" />

Usage

tsx

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

function LoadingState() {
  return (
    <div className="flex items-center gap-2">
      <Spinner />
      <span>데이터를 불러오는 중...</span>
    </div>
  );
}