애니메이션
Scroll Progress
스크롤 진행률을 상단 바 또는 원형 링으로 표시하는 인디케이터. scroll 이벤트를 requestAnimationFrame으로 스로틀링해 진행률을 계산하며, target ref로 내부 스크롤 컨테이너를 추적하거나 미지정 시 문서 전체를 기준으로 한다. Vivid Kit 퍼플·핑크 그라데이션, prefers-reduced-motion 대응, ARIA progressbar 접근성 포함.
- 분류
- 애니메이션
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ScrollProgress-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| variant | "bar" | "circle" | "bar" | 표시 형태: 상단 진행 바 또는 원형 링. |
| target | React.RefObject<HTMLElement | null> | undefined | 스크롤을 추적할 요소의 ref. 지정 시 해당 요소 내부 스크롤 기준, 미지정 시 window(문서 전체) 기준. |
| thickness | number | bar=6, circle=8 | 바 두께 또는 원형 링 두께(px). |
| size | number | 64 | 원형 variant의 지름(px). |
| colorStart | string | "#C084FC" | 진행률 그라데이션 시작 색상. |
| colorEnd | string | "#EC4899" | 진행률 그라데이션 끝 색상. |
| trackColor | string | "rgba(255, 255, 255, 0.15)" | 트랙(배경) 색상. |
| showLabel | boolean | true | 원형 variant 중앙에 퍼센트 텍스트 표시 여부. |
| children | ReactNode | undefined | 원형 variant 중앙에 표시할 커스텀 자식(퍼센트 대체). |
| className | string | undefined | 추가 클래스명. |