Spinner

로딩 상태를 나타내는 회전 인디케이터 컴포넌트

개요

Spinner 컴포넌트는 lucide-react의 Loader2 아이콘에 회전 애니메이션을 적용한 로딩 인디케이터입니다. role="status"와 aria-label="Loading"이 기본 적용되어 접근성을 보장하며, 5가지 크기를 지원합니다.

주요 특징

• ✅ 크기 옵션: xs, sm, md, lg, xl 5가지 크기
• ✅ 회전 애니메이션: animate-spin 기본 적용
• ✅ 접근성: role="status", aria-label="Loading" 자동 적용
• ✅ 색상 커스텀: text-* 클래스로 색상 제어 가능
• ✅ 디자인 토큰: 테마 커스터마이징 지원

Sizes

Spinner는 5가지 크기를 지원합니다.

<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

색상 변경

className의 text-* 유틸리티로 색상을 변경할 수 있습니다.

<Spinner size="lg" />
<Spinner size="lg" className="text-muted-foreground" />
<Spinner size="lg" className="text-blue-500" />
<Spinner size="lg" className="text-green-500" />
<Spinner size="lg" className="text-red-500" />

라벨과 함께 사용

로딩 텍스트와 함께 배치하여 의미를 명확히 전달합니다.

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

버튼 내부

버튼의 로딩 상태를 표시할 때 사용합니다.

<Button disabled>
  <Spinner size="sm" />
  처리 중...
</Button>

API Reference

Props

lucide-react Loader2Icon의 props(size 제외)를 상속받습니다.

기본 사용법

import { Spinner } from "@vortex/ui-foundation"
 
// 기본
<Spinner />
 
// 크기 지정
<Spinner size="lg" />
 
// 색상 지정
<Spinner className="text-blue-500" />

접근성

시맨틱 마크업

• role="status"가 적용되어 로딩 상태 영역임을 명시
• aria-label="Loading"이 기본 적용되어 스크린 리더가 로딩 상태를 인식

권장 사항

• ✅ 다른 언어/맥락이 필요하면 aria-label을 덮어쓰기
• ✅ 로딩 텍스트를 함께 표시해 시각적으로도 의미 전달
• ❌ 페이지 전체 로딩에는 Spinner 대신 OverlayLoading 사용

관련 컴포넌트

• Skeleton: 콘텐츠 형태의 로딩 플레이스홀더
• OverlayLoading: 전체 화면 로딩 오버레이
• Button: 로딩 상태를 포함한 버튼