Spinner
크기와 의미별 색상을 제공하는 비확정 진행 상태예요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
uiSize | md, lg | md |
variant | current, muted, primary, danger | current |
label | 접근 가능한 상태 텍스트 | Loading |
decorative | true, false | false |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/spinner.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRSpinner } from '@tinyrack/ui/components/spinner';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
크기 고유 링크
주변 텍스트나 컨트롤에 스피너 크기를 맞추세요.
색상 변형 고유 링크
주변 텍스트 색상을 따를 때는 `current`, 강조를 낮출 때는 `muted`, 진행 중인 작업에는 `primary`, 실패한 작업에는 `danger`를 사용하세요.
독립 상태 또는 컨트롤 장식 고유 링크
독립 `TRSpinner`가 상태 알림을 담당해요. 이름이 있는 `TRButton`은 로딩 상태를 담당하고 중첩된 스피너를 숨겨요. 모션 감소 설정에서는 회전이 멈춰요.
작업 수명 주기 고유 링크
작업을 시작하고 완료한 뒤 초기화하며, 작업 중일 때만 공지 상태가 존재하는지 확인하세요.
API
TRSpinner는 기본적으로 role="status"를 노출하므로 작업에 맞는 비어 있지 않은 label을 지정하세요. label이 비어 있으면 Loading을 대신 사용해요. 이미 접근 가능한 이름이 있는 로딩 컨트롤이나 상태 영역 안에서는 decorative를 설정해 하나의 요소만 알리세요. 작업이 진행되는 동안에만 Spinner를 렌더링하세요. 필요하면 업데이트되는 영역에 aria-busy="true"를 설정하고, 완료 소식은 그 영역에서 알려 주세요. 사용자가 동작 줄이기를 요청하면 회전이 멈춰요.
| CSS 토큰 | 기본값 | 용도 |
|---|---|---|
--tr-spinner-size | 크기 레시피 | 표시기 지름 |
--tr-spinner-stroke-width | --tinyrack-spinner-stroke-width | 링 두께 |
--tr-spinner-color | 의미형 변형 색상 | 활성 링과 트랙 색상 |
--tinyrack-spinner-size-md | 기반 치수 | 작은 지름 |
--tinyrack-spinner-size-md | 기반 치수 | 중간 지름 |
--tinyrack-spinner-size-lg | 기반 치수 | 큰 지름 |
--tinyrack-spinner-track-opacity | 기반 치수 | 비활성 링 불투명도 |