7onicDESIGN SYSTEM

Spinner

Spinner는 불확정 로딩 상태를 시각적으로 표시하는 컴포넌트입니다. Ring, Dots, Bars, Orbit 4가지 variant를 제공하며, 데이터 패칭이나 페이지 전환 등 완료 시점을 알 수 없는 비동기 처리에 사용합니다.

4
Variants
3
Sizes
3
Colors
Pure
React

Playground

Preview
ringdefaultdefault
Variant
Size
Color
Speed
<Spinner />

Variants

Ring
회전 링, 가장 표준적인 로딩 표현
Default
Dots
3개의 점이 순서대로 페이드되는 펄스 애니메이션
Inline
Bars
4개의 바가 물결치는 스케일 애니메이션
Processing
Orbit
Y축 3D 회전, 5가지 서브 스타일 (Ring, Dots, Cube, Flip, Morph)
3D

Sizes

sm
Ring16px
Orbit22px
default
Ring24px
Orbit32px
lg
Ring32px
Orbit44px

Features

Color

3가지 색상 옵션입니다. current는 부모 요소의 텍스트 색상을 상속해 버튼 내부 등에서 자연스럽게 어울립니다.

default
primary
current
<Spinner color="default" />
<Spinner color="primary" />
<Spinner color="current" />

Speed

애니메이션 속도를 3단계로 조정할 수 있습니다.

slow
default
fast
<Spinner speed="slow" />
<Spinner speed="default" />
<Spinner speed="fast" />

3D Orbit Styles

5가지 3D 오빗 스타일을 한눈에 비교할 수 있습니다.

Ring
Dots
Cube
Flip
Morph
Ring (lg, primary)
Dots (lg, primary)
Cube (lg, primary)
Flip (lg, primary)
Morph (lg, primary)

API

Component Structure

Spinner— Pure React

스탠드얼론 컴포넌트, 서브 컴포넌트 없음

Props

variant"ring"
"ring" | "dots" | "bars" | "orbit"

스피너의 시각적 variant

orbitStyle"ring"
"ring" | "dots" | "cube" | "flip" | "morph"

Orbit 서브 스타일 (orbit variant 전용)

size"default"
"sm" | "default" | "lg"

사이즈

color"default"
"default" | "primary" | "current"

색상 (default: 다크, primary: 브랜드, current: 부모 텍스트 색상 상속)

speed"default"
"slow" | "default" | "fast"

애니메이션 속도

label"Loading"
string

접근성 레이블 (aria-label)

classNameundefined
string

추가 CSS 클래스

Anatomy

Ring
1
2
Dots
1
2
3
Bars
1
2
3
4
Orbit (Default: Dual Ring)
1
2
1
Track
배경 링
2
Indicator
활성 부분
D
Dots
순차 페이드
O
Orbit
3D 회전

Best Practices

✓

권장

  • ✓불확정 대기 시간에는 Spinner를 사용합니다
  • ✓버튼 내부에는 size="sm"과 color="current"를 사용합니다
  • ✓텍스트 옆 인라인 표시에는 dots variant가 적합합니다
✕

지양

  • ✕진행률을 알 수 있는 경우 Spinner를 사용하지 않습니다. Progress를 사용합니다.
  • ✕한 페이지에 Spinner를 동시에 많이 표시하지 않습니다
  • ✕사용자 조작 완료 후 피드백에는 Spinner를 사용하지 않습니다. Toast를 사용합니다.

Accessibility

ARIA / WCAG

  • role="status" 자동 부여
  • aria-label="Loading" 기본값
  • label prop으로 커스텀 레이블
  • 스크린 리더 지원 완료