Awesome

react-topbar-progress-indicator

topbar progress indicator as a React component

Will simply show() and hide() topbar when the component is respectively mounted and unmounted.

Since topbar is a singleton, using <TopBarProgress /> multiples times will take this in consideration. This means that hide() will only be called when all <TopBarProgress /> have been unmounted.

For example, if you render 2 <TopBarProgress /> and unmount one (eg: you are doing 2 async things and only once is done), hide() won't be called. You will need to have both instances unmounted.

Installation

npm install react-topbar-progress-indicator
## or
yarn add react-topbar-progress-indicator

Usage

import TopBarProgress from "react-topbar-progress-indicator";

TopBarProgress.config({
  barColors: {
    "0": "#fff",
    "1.0": "#fff"
  },
  shadowBlur: 5
});

const YourThing = () => {
  return <div>{this.state.loading && <TopBarProgress />}</div>;
};

Config

Since topbar is a singleton, you should configure via Topbar.config().

barThickness (Integer, px)

The progress bar thickness in px (default: 3).

barColors (Object { progress: color })

Object of gradient color stops used to draw the progress bar.

Example:

  barColors: {
    "0": "#f00",
    "0.5": "#0f0",
    "1.0": "#00f",
  },

shadowBlur

Integer of the shadow blur in px (default: 10).

shadowColor

String that represent the shadow color (hexa, default: #000).

Changelog

Check the changelog for more informations about recent releases. You might also find releases notes on GitHub.

Contribute

⇄ Pull requests and ★ Stars are always welcome.

Please read the contribution guidelines before contributing.

Code of Conduct

We want the community to be friendly and respectful to each other. Please read our full code of conduct so that you can understand what actions will and will not be tolerated.

License

MIT

Security contact information

To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.