Spinner

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

길이를 모르는 짧은 처리 중임을 나타냅니다. 단독으로는 label로 작업을 설명하세요. 상태를 이미 알리는 영역 안에서는 decorative로 설정하세요.

스피너를 무기한으로 보여주지 마세요. 실패, 지연, 취소를 별도로 알리세요. 로딩은 여러 live region이 아닌 하나에서 알리세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

span(status) → decorative SVG + visually hidden label

키보드와 접근성

기본적으로 Spinner는 role=status와 시각적으로 숨겨진 텍스트를 가집니다. decorative prop은 접근성 트리에서 제거합니다. reduced motion에서는 회전이 멈추지만 정적 표시기와 label은 유지됩니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Spinner } from '@surflane/ui'

<Spinner label='Syncing environments' />
<button disabled>
  <Spinner decorative size='small' /> Saving
</button>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰