react-top-loader

Simple fixed-to-top progress bar / loader component for React (similar to sites like GitHub, Medium etc.)

Installation

npm install react-top-loader

or

yarn add react-top-loader

Usage

• Just import TopLoader and set the show prop to true. This will show the indeterminate loader with looping animation at the top of the page.
• Use the progress prop to control the animation manually.
• The loading bar is fixed to top by default. Set fixed to false to disable it.

Here are some more examples:

import TopLoader from "react-top-loader";
 
const Examples = () => (
  <div>
    {/* Fixed to Top with looping animation */}
    <TopLoader show color="#61d800" />
 
    {/* Progress Indicator */}
    <div style={{ padding: 16 }}>
      <TopLoader show progress={0.2} fixed={false} backgroundColor="#ddd" />
    </div>
 
    {/* Animated */}
    <div style={{ padding: 16 }}>
      <Animator
        color="#61d800"
        fixed={false}
        backgroundColor="#ddd"
        progressDuration={400}
      />
    </div>
 
    {/* Indeterminate */}
    <div style={{ padding: 16 }}>
      <TopLoader backgroundColor="#eee6ff" show fixed={false} color="#0000e4" />
    </div>
 
    {/* Indeterminate (no background) */}
    <div style={{ padding: 16 }}>
      <div>Indeterminate (no background)</div>
      <TopLoader color="#D32F2F" show fixed={false} duration={2500} />
    </div>
  </div>
);
 
// Helper class to animate the loader
class Animator extends React.Component {
  state = { progress: 0 };
 
  componentDidMount() {
    setInterval(
      () => this.setState({ progress: Math.min(1, this.state.progress + 0.1) }),
      400
    );
  }
 
  render() {
    return <TopLoader show progress={this.state.progress} {...this.props} />;
  }
}

Props

Prop	Type	Default	Required	Description
show	boolean	false	yes	Set this to true to show the loader
progress	null (or) number (between 0 and 1)		no	If undefined or null, indeterminate animated loader is shown. If specified, a fraction of the strip is filled
fixed	boolean	true	no	If true, loader is shown at the top of the page (position:fixed). Otherwise you have to position it yourself
thickness	number	2	no	Thickness (height) of the loading strip in pixels (px)
color	string	"#03a9f4"	no	Color of the loading strip
backgroundColor	string	"transparent"	no	Color of the empty region behind the loading strip (transparent by default)
delay	number (milliseconds)	0	no	Show the loader after a specified delay (use this to prevent flashing of loader of very short tasks/requests)
duration	number (milliseconds)	1500	no	Duration of the animation of the indeterminate loader (not applicable if progress is provided)
progressDuration	number (milliseconds)	400	no	If you're changing the value of progress to animate the loader, then use this to control the speed of animation
zIndex	number	10000	no	Z-Index of the top-level loader div
className	string		no	Specify a custom class for the top-level div
style	object		no	Override styles for the top-level div

Credits

Developed by the Jovian.ml team. Released under the MIT Licence. Inspired by this Codepen example by Shahen Algoo.