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.

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

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

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

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

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

Example:

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

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

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

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

⇄ Pull requests and ★ Stars are always welcome.

Please read the contribution guidelines before contributing.

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.

MIT

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