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 '';


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:


Click here to go to github repository

Click here to see running example on code sandbox