https://github.com/anuraglol/page-progressbar-react

🎉 A simple progressbar based on the scroll state of a page, as a react component.
https://github.com/anuraglol/page-progressbar-react

Last synced: 11 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/anuraglol/page-progressbar-react
• Owner: anuraglol
• License: gpl-3.0
• Created: 2022-06-25T13:33:18.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-11T12:34:40.000Z (over 2 years ago)
• Last Synced: 2024-08-09T12:17:57.987Z (5 months ago)
• Language: TypeScript
• Homepage: https://page-progressbar-react.vercel.app/
• Size: 383 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ⚡ [Page Progressbar React](https://www.npmjs.com/package/page-progressbar-react)

💡 A Simple progressbar based on scroll state of a page using [framer-motion](https://www.framer.com/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.

```jsx

import PageProgressBar from "page-progressbar-react";

```

After importing, add `` to your desired page.

```jsx

-pages / index.js;

import PageProgressBar from "page-progressbar-react";

export default function HomePage() {

  return (

    <>

      

      {/* Your code here... */}

    >

  );

}

```

## Customization

Currently `PageProgressBar` supports `color` and `height` props.

```jsx

export default function HomePage() {

  return (

    <>

      

      {/* Your code here... */}

    >

  );

}

```

## Props:

| prop   | type   | default |

| ------ | ------ | ------- |

| color  | string | #ec4899 |

| height | number | 4px     |

## Author

- [Portfolio](https://anurag.tech)

- [GitHub](https://github.com/kr-anurag)

- [Twitter](https://twitter.com/imanuraglol)