컴포넌트
TypingLoader
채팅 말풍선 안에서 점 3개가 계단식 위상으로 통통 튀어 오르내리는 '입력 중' 인디케이터로, 순수 CSS 키프레임만으로 구현하고 reduced-motion 시 정지 상태를 표시한다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/TypingLoader-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| dotCount | number | 3 | 바운스하는 점 개수(1~8로 클램프). 기본 3개. |
| speed | number | 1200 | 바운스 한 사이클 시간(ms). 작을수록 빠르게 튄다. |
| bounceHeight | number | 8 | 점이 위로 튀는 최대 높이(px). |
| dotColor | string | #C084FC | 점 색상(브랜드 컬러 기본). |
| side | "left" | "right" | "none" | "left" | 말풍선 꼬리 방향. left=상대, right=나, none=꼬리 없음. |
| bubbleColor | string | #16121F | 말풍선 배경색. |