react-scroll-progress-bar

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

npm install react-scroll-progress-bar

Usage

Default Progress Bar:

import React from "react";
import ProgressBar from "react-scroll-progress-bar"; //Add this line

export default class App extends React.Component {
    render() {
        return (
            <div>
                <ProgressBar />
                //This is all you need to get the default view working
            </div>
        );
    }
}

---

Custom Progress Bar:

import React from "react";
import ProgressBar from "react-scroll-progress-bar";

export default class App extends React.Component {
    render() {
        return (
            <div>
                <ProgressBar height="6" bgcolor="#000" duration="0.2" />
                  // Here you can add any react component or jsx
                  // Add ProgressBar at your top level component or Root component.
                  // Change height and background-color by setting respective props.
            </div>
        );
    }
}

---

Configuration:

    <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

NOTE: To remove transition animation from progress bar, simply set duration="0".

---