anuraglol / page-progressbar-react

🎉 A simple progressbar based on the scroll state of a page, as a react component.

⚡ Page Progressbar React

💡 A Simple progressbar based on scroll state of a page using framer-motion

👀 Demo (https://page-progressbar-react.vercel.app/)

Installation

npm i page-progressbar-react
            or
yarn add page-progressbar-react

Usage

You can import the PageProgressBar component from the package after installing.

import PageProgressBar from "page-progressbar-react";

After importing, add <PageProgressBar /> to your desired page.

-pages / index.js;
import PageProgressBar from "page-progressbar-react";

export default function HomePage() {
  return (
    <>
      <PageProgressBar />

      {/* Your code here... */}
    </>
  );
}

Customization

Currently PageProgressBar supports color and height props.

export default function HomePage() {
  return (
    <>
      <PageProgressBar color="#2563eb" height={5} />

      {/* Your code here... */}
    </>
  );
}

Props:

prop	type	default
color	string	#ec4899
height	number	4px

Author

• Portfolio
• GitHub
• Twitter