react-top-loader

react-top-loader

Beautiful fixed-to-top progress bar 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

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

Credits

Developed by the Jovian.ml team. Released under the MIT Licence.