react-horizontal-page-progress

Horizontal slider for top of screen. When scrolling page down or up, it moves right or left respectively.

Usage no npm install needed!

<script type="module">
  import reactHorizontalPageProgress from 'https://cdn.skypack.dev/react-horizontal-page-progress';
</script>

README

React Horizontal Page Progress is a small React component. It is designed for showing scrolling page progress on the top of your page.

Using it is simple. Inside project folder, open terminal and type following command:

npm i react-horizontal-page-progress

Then inside screen component where you would like to use it, just import it.

import HorizontalPageProgress from "react-horizontal-page-progress";

Component uses only two props:

height: When using component, you should tell it by passing prop height what it's height should be - '10px' - for example... backgroundColor: Also, pass to component what color should it be.

Example usage:

<HorizontalPageProgress
 height="1px"
 backgroundColor="red"
/>

Click here to go to github repository

Click here to see running example on code sandbox