react-scroll-progress-bar

React Component for a fixed scroll progress bar. The progress bar can use the default color and height, or can be customized by any user provided height and color.

Install

1npm install react-scroll-progress-bar

Usage

Default Progress Bar:

1import React from "react";
2import ProgressBar from "react-scroll-progress-bar"; //Add this line to import the component
3
4export default class App extends React.Component {
5  render() {
6    return (
7      <div>
8        <ProgressBar />
9        //This is all you need to get the default view working
10      </div>
11    );
12  }
13}

---

Custom Progress Bar:

1import React from "react";
2import ProgressBar from "react-scroll-progress-bar";
3
4export default class App extends React.Component {
5  render() {
6    return (
7      <div>
8        <ProgressBar height="6" bgcolor="#000" duration="0.2" />
9        // Here you can add any react component or jsx // Add ProgressBar at your
10        top level component or Root component. // Change height and background-color
11        by setting respective props.
12      </div>
13    );
14  }
15}

---

Configuration:

1<ProgressBar height="8" bgcolor="#F43059" duration="1" />

height - Set height of progress bar. Default height is 8px. Pass the number not the unit. Unit is px

bgcolor - Set background-color of progress bar. Default background-color is #F43059.

duration - Set timing-duration for transition property. Default is 1s. Pass the number not the unit. Unit is s(seconds)

NOTE: To remove transition animation on progress bar, simply pass duration="0" to ProgressBar component.

---