Components
Spinner
순수 SVG 로딩 인디케이터. sm/md/lg (16/20/28px). `currentColor` 상속.
사용
import { Spinner } from "@fluxloop-ai/pds-ui/components/spinner";
<Spinner size="md" label="Loading" />Size
sm
md
lg
currentColor 상속
부모의 color 를 따라간다. 어두운 배경 위에서는 color: var(--pds-inverse-label) 를 부모에 주면 된다.
Props
| Prop | 타입 | 기본 | 설명 |
|---|---|---|---|
size | sm | md | lg | md | 16 / 20 / 28px |
label | string | "Loading" | 스크린리더용 aria-label |
접근성
role="status"+aria-label기본 적용prefers-reduced-motion: reduce환경에서는animate-spin정지 (motion-reduce:animate-none)
Registry 설치
npx shadcn add https://pds.pluto.com/r/spinner