Scroll Progress
A thin progress bar at the top of the page that tracks scroll position.
npx arupui add scroll-progress
Preview
Renders a fixed progress bar at the top of the page. Scroll to see it in action.
Usage
scroll-progress.tsx
import { ScrollProgress } from "@/components/blocks/scroll-progress"
// Place in your layout
<ScrollProgress />Props
| Prop | Type | Default |
|---|---|---|
color | string | hsl(var(--primary)) |
height | number | 3 |
position | top | bottom | top |
colorType:
stringDefault: hsl(var(--primary))heightType:
numberDefault: 3positionType:
top | bottomDefault: top