Scroll Progress
A sleek, high-performance scroll progress indicator built with Framer Motion. It provides real-time visual feedback as users scroll through long-form content, featuring a smooth gradient effect and professional aesthetic.
Live Interactive Preview
The scroll progress will be shown on top of the viewport right above header
Source
npx futureuikit add scroll-progress Details
Built with Framer Motion's useScroll hook for precise scroll tracking.Smooth, high-performance animation with zero layout shift.Customizable gradient colors and height via CSS.Fixed positioning ensures visibility at the top of the viewport.Perfect for blogs, documentation, and long-form articles.
How to Use?
- Import ScrollProgress from your UI components directory.
- Place it at the top level of your layout or specific long-form pages.
- Ensure it is rendered outside of containers with 'overflow-hidden' for correct tracking.