Spinner
고정된 사각 테두리를 따라 열린 구간이 흐르며 완료 시점을 알 수 없는 진행을 알립니다.
- 성숙도
- 후보
- 소스 경로
components/ui/spinner.tsx- 소스
- 소스
실제 미리보기
사용할 때
사용 기준
버튼이나 짧은 인라인 작업에서 잠시 기다릴 때 씁니다.
사용하지 않을 때
진행률을 알 수 있거나 넓은 페이지 로딩에는 Progress나 Skeleton을 씁니다.
변형과 상태
compact고정 예시버튼 안에서도 작업 이름이 구체적인지 확인합니다.
default고정 예시사각형은 고정된 채 열린 구간만 테두리를 따라 흐르는지 확인합니다.
reduced-motion환경에서 확인움직임 없이도 하나의 열린 변으로 대기 상태가 보이는지 확인합니다.
운영체제나 브라우저 설정을 바꾼 뒤 이 상태를 확인합니다.
접근성
이름 있는 status를 제공하고 하나의 사각 궤적은 장식으로 숨깁니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
label | string | 예 | 진행 중인 작업의 접근 가능한 이름입니다. |
size | "compact" | "default" | "large" | 아니요 | 사각 표시 크기입니다. |
사용 예시
지원 importimport { Spinner } from "@/components/ui/spinner"
<Spinner label="Saving document" size="compact" />