컴포넌트
ProgressBarStriped
45도 반투명 줄무늬가 흐르며 progress 값만큼 채워지는 그라디언트 진행바로, 순수 CSS background-position 애니메이션으로 리플로우 없이 부드럽게 이동한다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ProgressBarStriped-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| progress | number | 68 | 진행률 0~100 (범위 밖은 클램프). 채움 폭과 aria-valuenow에 반영. |
| height | number | 18 | 막대 높이(px). 최소 6px로 방어되며 줄무늬 주기 폭도 이 값에 비례. |
| stripeSpeed | number | 1 | 줄무늬 1주기 이동 시간(초). 작을수록 빠르게 흐른다. |
| direction | "forward" | "reverse" | "forward" | 줄무늬 흐름 방향(정방향 또는 역방향). |
| fromColor | string | #C084FC | 채움 그라디언트 시작 색. |
| showLabel | boolean | true | 우측에 퍼센트 텍스트 표시 여부. |