Scroll Progress

Component

About

A scroll progress indicator that tracks how far a user has scrolled through the page or a scrollable container, with vertical/horizontal and width/scale display modes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Progress to your project and fits it to your theme.

Code

How Scroll Progress is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import * as Motion from "motion/react";
import {
  ScrollProgressProvider,
  ScrollProgress,
  ScrollProgressContainer,
} from "@/components/ui/scroll-progress";

export default function ScrollProgressDemo() {
  return (
    <div className="relative h-[440px] w-full overflow-hidden rounded-xl border">
      <ScrollProgressProvider direction="vertical">
        <div className="z-50 absolute bottom-3 left-3 right-3">
          <ScrollProgress className="bg-foreground h-1.5 data-[global=false]:rounded-full" />
        </div>

        <ScrollProgressContainer className="w-full h-full data-[direction=vertical]:overflow-y-auto data-[direction=horizontal]:overflow-x-auto">
          <div className="flex flex-col">
            <div className="w-full h-[400px] shrink-0 flex items-center justify-center">
              <p className="flex items-center gap-2 font-medium">
                Scroll to see the progress bar{" "}
                <Motion.motion.span
                  className="text-xl leading-none"
                  animate={{ y: [3, -3, 3] }}
                  transition={{
                    duration: 1.25,
                    repeat: Infinity,
                    ease: "easeInOut",
                    type: "keyframes",
                  }}
                >
                  ↓
                </Motion.motion.span>
              </p>
            </div>
            <div className="w-full h-[400px] shrink-0 p-3">
              <div className="size-full bg-accent rounded-xl" />
            </div>
            <div className="w-full h-[400px] shrink-0" />
            <div className="w-full h-[400px] shrink-0 p-3">
              <div className="size-full bg-accent rounded-xl" />
            </div>
            <div className="w-full h-[400px] shrink-0" />
          </div>
        </ScrollProgressContainer>
      </ScrollProgressProvider>
    </div>
  );
}