Spin

로딩·처리 중 상태를 표시하는 Spin 컴포넌트입니다. 인라인 스피너, 설명 텍스트, 컨테이너 오버레이를 지원하며 role="status" · aria-busy · aria-label로 접근성을 보장합니다.

기본

spin · spin_indicator로 회전 스피너를 표시합니다.

크기

spin_sm · spin(기본) · spin_lg 세 가지 크기를 지원합니다.

색상

공통 color_* 클래스로 의미를 표현합니다.

설명 텍스트

spin_tip으로 스피너 아래에 로딩 메시지를 표시합니다.

데이터를 불러오는 중…

파일 업로드 중…

인라인

spin_inline으로 스피너와 텍스트를 가로로 배치합니다. 버튼·문단 안에 삽입할 때 유용합니다.

저장 중…

블록 정렬

spin_block은 부모 너비 안에서 스피너를 가운데 정렬합니다.

잠시만 기다려 주세요…

컨테이너 오버레이

spin_wrap에 is-loading을 지정하면 콘텐츠 위에 spin_overlay가 표시됩니다. JS로 클래스를 토글해 로딩 상태를 제어합니다.

대시보드

차트와 통계가 이 영역에 표시됩니다. 데이터를 불러오는 동안 오버레이가 콘텐츠를 덮습니다.

데이터 로딩 중…

블러 효과

spin_wrap-blur를 함께 사용하면 콘텐츠에 블러가 적용됩니다.

마크업

독립 스피너는 role="status"와 aria-busy="true"를 지정합니다. 오버레이는 spin_wrap에 is-loading을 토글합니다.

<!-- 인라인 스피너 -->
<div class="spin color_primary" role="status"
  aria-live="polite" aria-busy="true" aria-label="로딩 중">
  <span class="spin_indicator" aria-hidden="true"></span>
  <p class="spin_tip">로딩 중…</p>
</div>

<!-- 컨테이너 오버레이 -->
<div class="spin_wrap is-loading">
  <div class="spin_wrap-body">
    <!-- 콘텐츠 -->
  </div>
  <div class="spin spin_overlay color_primary" role="status"
    aria-live="polite" aria-busy="true" aria-label="로딩 중">
    <span class="spin_indicator" aria-hidden="true"></span>
  </div>
</div>

API · Spin Props

Prop	타입	기본값	설명
`size`	'sm' \| 'md' \| 'lg'	md	스피너 크기. sm·lg는 spin_sm · spin_lg 클래스
`color`	'primary' \| 'success' \| 'warning' \| 'danger'	primary	공통 color_* 클래스로 스피너 색상 지정
`tip`	string	—	스피너 아래 설명 텍스트 (spin_tip)
`inline`	boolean	false	스피너·텍스트 가로 배치 (spin_inline)
`block`	boolean	false	부모 너비 안 가운데 정렬 (spin_block)
`overlay`	boolean	false	컨테이너 전체를 덮는 오버레이 레이어 (spin_overlay)
`aria-label`	string	로딩 중	스크린 리더용 로딩 설명

API · SpinWrap Props

Prop	타입	기본값	설명
`loading`	boolean	false	true일 때 is-loading + 오버레이 Spin 표시
`block`	boolean	false	데모·빈 상태용 최소 높이 (spin_wrap-block)
`blur`	boolean	false	로딩 시 콘텐츠 블러 (spin_wrap-blur)
`tip`	string	—	오버레이 Spin에 전달할 설명 텍스트
`aria-label`	string	로딩 중	오버레이 Spin에 전달할 접근성 라벨

API · Spin Slots

슬롯	설명
`default`	tip 외 추가 콘텐츠 (선택)

API · SpinWrap Slots

슬롯	설명
`default`	오버레이 아래 실제 콘텐츠 (spin_wrap-body)

클래스 · 속성

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`spin`	루트 래퍼 (인라인 flex)
`spin_indicator`	회전하는 원형 스피너
`spin_tip`	스피너 아래 설명 텍스트 (선택)
`spin_sm · spin_lg`	크기 변형
`spin_inline`	스피너·텍스트 가로 배치
`spin_block`	부모 너비 안 가운데 정렬
`spin_wrap`	오버레이용 상대 위치 컨테이너
`spin_wrap-body`	오버레이 아래 실제 콘텐츠
`spin_overlay`	컨테이너 전체를 덮는 스피너 레이어
`spin_wrap-block`	데모·빈 상태용 최소 높이
`spin_wrap-blur`	로딩 시 콘텐츠 블러
`is-loading`	spin_wrap에 지정 — 오버레이 표시
`color_primary · color_success · color_warning · color_danger`	공통 색상 변형
`role="status"`	로딩 상태 시맨틱 (권장)
`aria-busy="true"`	처리 중 표시
`aria-live="polite"`	스크린 리더에 상태 변경 알림
`aria-label`	접근 가능한 로딩 설명

버튼 내부 로딩은 .btn.is-loading + .btn_spinner를 사용합니다. 독립 스피너·영역 오버레이는 이 Spin 컴포넌트를 사용하세요.

디자인 토큰

토큰	기본값	설명
`--spin-size`	2rem	스피너 지름
`--spin-size-sm · --spin-size-lg`	1.25rem · 3rem	크기 변형별 지름
`--spin-border`	3px	스피너 테두리 두께
`--spin-border-sm · --spin-border-lg`	2px · 4px	크기 변형별 테두리
`--spin-duration`	0.8s	회전 애니메이션 주기
`--spin-gap`	var(--space-sm)	스피너·텍스트 간격
`--spin-tip-size`	var(--text-size-sm)	설명 텍스트 크기
`--spin-overlay-bg`	rgba(15, 20, 25, 0.72)	오버레이 배경 (tip 명도 대비용 불투명도)
`--spin-overlay-tip-color`	#ffffff	오버레이 위 tip 텍스트 색
`--spin-wrap-min-height`	8rem	spin_wrap-block 최소 높이
`--spin-wrap-content-opacity`	0.45	로딩 시 콘텐츠 불투명도