React Page Scroll Progress Bar

A customizable React component that displays a progress bar at the top of your page, indicating how much of the page has been scrolled.

Features

• 📊 Shows scroll progress as a horizontal bar
• 🎨 Customizable color, background, height, and position
• 🪶 Lightweight and dependency-free (except React)
• 🧩 Can track scroll progress of the whole page or a specific container

Installation

npm install @viraj-nikam/react-page-scroll-progress-bar

or

yarn add @viraj-nikam/react-page-scroll-progress-bar

Usage

import React from "react";
import { PageScrollProgressBar } from "@viraj-nikam/react-page-scroll-progress-bar";

function App() {
  return (
    <div>
      <PageScrollProgressBar
        color="#3498db"
        bgColor="#e0e0e0"
        height="6px"
        top="0"
      />
      {/* Your page content */}
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------------|----------------------------|-------------|-----------------------------------------------------------------------------| | container| HTMLElement \| null | undefined | The container element to track scroll progress. Defaults to the whole page. | | color | string | #eb5757 | The color of the progress bar. | | bgColor | string | #f2f2f2 | The background color of the progress bar. | | height | string | 0.25rem | The height of the progress bar (e.g., 4px, 0.5rem). | | top | string | 0 | The distance from the top of the viewport (e.g., 0, 10px). |

Example: Tracking a Scrollable Container

import React, { useRef } from "react";
import { PageScrollProgressBar } from "@viraj-nikam/react-page-scroll-progress-bar";

function ContainerExample() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div>
      <PageScrollProgressBar
        container={containerRef.current}
        color="#27ae60"
        bgColor="#dff9fb"
        height="5px"
        top="50px"
      />
      <div
        ref={containerRef}
        style={{ height: "400px", overflowY: "scroll" }}
      >
        {/* Long scrollable content */}
      </div>
    </div>
  );
}

Styling

You can further customize the progress bar using CSS variables:

• --page-scroll-bar-color
• --page-scroll-background-color
• --page-scroll-height
• --top

License

ISC

Author

Viraj Nikam

Issues

Report bugs or request features