Spinner
작업의 진행 단계 결정 또는 완료 시점이 확정되지 않은 경우 사용할 수 있는 요소입니다.
구조도
- Root
- Track
- Indicator
컴포넌트 미리보기
옵션
Size
Spinner는 small, medium 2개의 사이즈를 가질 수 있습니다. medium은 화면 전체를 로딩할 때, 독립적인 요소로 쓰일 때 사용하며, small은 다른 요소와 나란히 쓰일 때, 컴포넌트 위에서 사용합니다.
Variant
Spinner는 gray, primary, gray(on overlay) 3개의 Variant 옵션을 가질 수 있습니다. gray가 가장 보편적이며, primary는 화면 내에서 중요도가 높은 경우에만 사용합니다. white는 overlay 레이어 위에서만 사용합니다.
옵션 테이블
| 속성 | 값 | 기본값 |
| size | small, medium | medium |
| variant | gray, white, primary | gray |
가이드라인
Spinner Only
화면 전체 단위를 로딩하는 경우, Medium Size를 사용합니다.
Sheet
Bottomsheet, Dialog와 같은 Overlay 요소를 로딩하는 경우, Medium Size를 사용합니다.
Placement
Spinner가 로딩하고있는 영역의 중앙에 배치합니다.
Don't
한 화면에 여러개의 Spinner를 표시하지 않습니다. 이는 유저의 행동을 방해할 수 있으며, 유저에게 필요 이상의 불안정한 상태를 제공합니다.