Welcome to this scrollable content area. As you scroll through this container, the progress indicator on the right will update to show your current position.
The progress is displayed both as a visual line indicator and a numeric percentage.
The component uses Motion's useScroll hook to track the scroll position of its container. The progress is then transformed into both a percentage string for positioning and a rounded number for display.
This component is perfect for long-form content like articles, documentation, terms of service pages, or any scrollable container where users benefit from knowing their reading progress.
You can customize the appearance by passing additional classes via the className prop. The component uses CSS variables for progress positioning, making it easy to adapt to different themes.
The Scroll Progress component provides an elegant way to show users their position within scrollable content. It's lightweight, performant, and enhances the user experience for long-form reading.