Skip to content
Docs

ScrollProgress

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { ScrollProgress } from "@hua-labs/hua";

:
gradient
primary

heightnumber2Progress bar height (px)
color"default" | "primary" | "secondary" | "gradient""gradient"Progress bar color
position"top" | "bottom""top"Display position
showPercentagebooleanfalseShow percentage badge
animatedbooleantrueEnable smooth animation

Code Examples

docs:common.basicUsagetsx
1import { ScrollProgress } from '@hua-labs/hua';
2 
3// 페이지 상단에 그라디언트 진행률 바
4<ScrollProgress />
docs:components.scrollProgress.examples.customizationtsx
1<ScrollProgress
2  position="bottom"
3  color="primary"
4  height={4}
5  showPercentage
6/>

  • •docs:components.scrollProgress.accessibility.nonInteractive: docs:components.scrollProgress.accessibility.nonInteractiveDesc
ScrollAreaScrollIndicator