React Top Progress Bar

Adds a progress bar displayed on top of your page. When value changes, an animation is performed. When value is less or equal to 0 or greater than or equal to 100 the progress bar will disappear automatically

Demo

You can find a demo here

Installation

First you need to install the package as dependency by running the following command

yarn add react-top-progress-bar

Usage

Then you can the progress bar in your component as described above:

import React, { Component } from "react";
import ReactTopProgressBar from "react-top-progress-bar";


class Demo extends Component {
  render() {
    return (
      <div >
        <ReactTopProgressBar value={50} />
      </div>
    );
  }
}

export default Demo;

List of allowed props and defaults

Here a list of allowed props and related default values

| prop | default value | behavior | |-----------------|---------------|-----------------------------------| | value | 0 | Value, in percentage, of progress | | color | #CC0000 | Color of progress bar | | backgroundColor | transparent | Background color of progress bar | | withShadow | false | The progress will have a shadow | | striped | false | Striped animated scrollbar |