Scroll
Scroll Progress
A scroll progress indicator component that displays a visual progress bar and percentage as users scroll through content.
Usage
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The scrollable content to track progress |
className | string | - | Additional CSS classes for the scroll container |
Features
- Real-time progress tracking: Displays current scroll position as a percentage (0-100)
- Visual progress indicator: A horizontal line moves along a vertical track to show position
- Badge display: Shows the current percentage in a styled badge
- Tick marks: 25 evenly spaced tick marks provide visual reference points
- Smooth animations: Powered by Motion for fluid progress updates