Components
Progress Circle
진행 중임을 알리는 회전 스피너입니다.
코드 보기
<span class="tn-spin"></span>
/* 버튼 내장: .btn.busy .spin 패턴 */Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 18px | 기본 | |
| 26px | 영역 로딩 | |
| 버튼 내장 | 레이블 "…중" + 스피너 |
Guidelines
✓ Do
- 2초 이상 걸리는 작업에만 표시
- 버튼 내장 시 레이블을 "~중…"으로
✕ Don't
- 퍼센트를 아는 작업엔 쓰지 않는다 (진행바 사용)
- 화면 중앙 대형 스피너 금지 (Skeleton 사용)
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
크기 | 18px 기본 / border 2px | |
회전 | 0.7s linear |
비교
Spinner vs Progress Bar — 진행률을 알면 바, 모르면 스피너.