Scroll Progress

A horizontal progress bar that animates as the user scrolls. It shows scroll position on long pages. It uses motion and scroll hooks to calculate and update progress. Use it to visually indicate where the user is on a page.

byJulien Thibeaut from Motion Primitives

Installation

terminal

pnpm dlx layro-cli add @ibelick/scroll-progress

npx layro-cli add @ibelick/scroll-progress

npx layro-cli add @ibelick/scroll-progress

bunx layro-cli add @ibelick/scroll-progress

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import { motion, SpringOptions, useScroll, useSpring } from 'motion/react';
import { cn } from '@/lib/utils';
import { RefObject } from 'react';

export type ScrollProgressProps = {
  className?: string;
  springOptions?: SpringOptions;
  containerRef?: RefObject<HTMLDivElement>;
};

const DEFAULT_SPRING_OPTIONS: SpringOptions = {
  stiffness: 200,