Scroll Progress Bar — React Component

A minimal vertical progress rail that fills smoothly as a target section moves through the viewport or a scrollable container.

Motion Effectsscrollspringscrollprogressindicatorsectionframer-motionnavigation

Scroll Progress Bar

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

fillColor

Active filler color.

backgroundColor

Inactive rail color.

markerCount

Number of milestone circles rendered along the rail.

markerSize

Circle diameter in pixels.

showMarkers

Show or hide milestone circles on the rail.

stiffness

Spring stiffness used to smooth scroll progress.

damping

Spring damping used to settle the filler movement.

Generated JSX

Copy this into your page.

<ScrollProgressBar
  fillColor="#770bf4"
  backgroundColor="#dddddd"
  markerCount={4}
  markerSize={10}
  showMarkers={true}
  stiffness={150}
  damping={26}
/>

Animation effects

scrollspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Scroll Progress Bar

Scroll Progress Bar is a slender vertical progress rail for long-form page sections. It listens to a target section or scrollable container with Framer Motion scroll values, then smooths the fill movement through spring physics. Colors and dimensions are configurable, making it useful as a restrained orientation cue beside editorial narratives, feature walkthroughs, and case studies.

Common use cases

Long-form feature walkthroughs
Case study and portfolio narratives
Documentation chapter indicators
Scroll-linked product story sections

Installation