Spinner
스피너는 콘텐츠를 불러오는 중임을 알려주는 회전 아이콘이에요.
설치
pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/spinner.json추가 의존성은 없어요. 아래 코드를 components/ui/spinner.tsx 에 복사해요.
Examples
Default
기본 크기(medium, 24px) 스피너예요. 처음 1초 동안 빠르게 돌면서 선이 늘어나는 등장 애니메이션이 있고, 그 뒤로는 0.86초 주기로 계속 회전해요.
Sizes
size 로 크기를 정해요. 프리셋 대신 숫자(px)를 넣을 수도 있어요.
| Size | 크기 | 용도 |
|---|---|---|
xsmall | 12px | 토글 안 |
small | 16px | 버튼·입력 필드, 좁은 공간 |
medium | 24px | 기본. 대부분의 경우 |
large | 48px | 영역 전체 로딩 |
xlarge | 96px | 페이지 전체 로딩 |
Appearance
기본값 inherit 는 현재 테마의 아이콘 색(color.icon.subtle)을 써요. 배경이 반대 테마일 때는 invert(color.icon.inverse) 를 써요.
Spinner over content
콘텐츠 위에 스피너를 겹칠 때는 콘텐츠 컨테이너에 opacity.loading 토큰(var(--ds-opacity-loading))을 적용해 내용을 흐리게 하고 스피너가 눈에 띄게 해요.
Delay
스피너는 약 150200ms 에 걸쳐 서서히 나타나서 짧은 작업에서 깜빡임이 거의 없어요. 조금 더 긴 작업에서 스피너를 아예 안 보이게 하고 싶을 때만 1000ms 이상) 를 줘요.delay(500
Usage guidelines
스피너는 시스템 작업이 진행 중이고, 끝나면 콘텐츠가 나타난다는 것을 알려줘요. 사용자가 동작을 시작하자마자 돌기 시작하고 콘텐츠가 보이면 사라져요.
- 1초보다 오래 기다릴 것 같을 때만 보여줘요.
- 한 페이지에는 스피너를 하나만 둬요.
- 페이지 일부만 갱신된다면 그 영역 안에 스피너를 둬요. 위치가 애매하면 로딩이 끝났을 때 사용자가 볼 곳에 둬요.
- 버튼에서 시작한 로딩은 Button 의
isLoading을 써요. - 완료율을 계산할 수 있는 긴 작업에는 Progress Bar 가 더 잘 맞아요.
Do· 갱신되는 곳에
콘텐츠가 바뀌는 영역이나 사용자가 다음에 볼 곳에 스피너를 둬요.
Don't· 여러 개 동시에
한 페이지에 스피너를 여러 개 띄우거나 1초 이내의 짧은 작업에 보여주지 않아요.
Accessibility
label을 꼭 지정해요. "불러오는 중", "제출하는 중", "처리하는 중" 처럼 실제 작업을 설명해요.label이 있으면 SVG 에role="img"와aria-label이 붙고, 없으면role="none"이에요.- 스피너는 동작 줄이기(reduced motion) 설정의 예외예요. 멈춘 스피너는 작업이 멈춘 것처럼 보이니 애니메이션을 끄지 않아요.
- 고대비 모드(forced colors)에서는 선 색이 시스템 글자 색(
CanvasText)으로 바뀌어요.
Props
Prop
Type