Scroll Progress Bar with Next.js and Framer Motion

Overview

This tutorial shows you how to build a clean scroll progress bar in a Next.js or React project using Framer Motion, where the bar dynamically reflects the user's scroll position.

You'll learn how to set up the project, create a reusable component, and use the useScroll hook to map scroll progress to a horizontal scale animation, alongside styling the bar with fixed positioning, custom sizing and colour. The component can be easily added to any page, providing a lightweight way to enhance navigation and give users a clear sense of progress through long form content.