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.