Spinner

Betav1.0.0

로딩 인디케이터. xs~xl 5단계 사이즈, 버튼 내부, 영역 오버레이를 지원합니다. 의존성 없이 SVG + animate-spin. role="status" 로 스크린리더 안내.

Loading…

import { Spinner, SpinnerOverlay } from "@/components/ui/spinner";

<Spinner />
<Spinner size="lg" />

// 버튼 안
<Button disabled><Spinner size="sm" /> 저장 중…</Button>

// 영역 오버레이 (부모에 relative)
<div className="relative">
  {loading && <SpinnerOverlay label="불러오는 중…" />}
</div>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/spinner.json

Variants

In button

Loading…

import { Spinner, SpinnerOverlay } from "@/components/ui/spinner";

<Spinner />
<Spinner size="lg" />

// 버튼 안
<Button disabled><Spinner size="sm" /> 저장 중…</Button>

// 영역 오버레이 (부모에 relative)
<div className="relative">
  {loading && <SpinnerOverlay label="불러오는 중…" />}
</div>

Overlay

Loading…

import { Spinner, SpinnerOverlay } from "@/components/ui/spinner";

<Spinner />
<Spinner size="lg" />

// 버튼 안
<Button disabled><Spinner size="sm" /> 저장 중…</Button>

// 영역 오버레이 (부모에 relative)
<div className="relative">
  {loading && <SpinnerOverlay label="불러오는 중…" />}
</div>

Composition

Spinner (size, label)
└── SpinnerOverlay (label) — 영역 위 오버레이

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

Package	Version
class-variance-authority	`0.7.1`
clsx	`2.1.1`
tailwind-merge	`3.6.0`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

utils