simple-react-progress-bar

react-progress-bar

Loading bar for your React.js app. Similar to one used in Youtube.


Setup

1. npm install

npm install simple-react-progress-bar

2. In your component.js.jsx

require ('react-progress-bar');
 
var component = React.createClass({
  getInitialState: function() {
    // Add startLoading and completeLoading to the component's state
    return {
      startLoading: false, // set to true if loading starts on mount
      completeLoading: false
    };
  },
 
  render: function() {
    return (
      <div>
        <ProgressBar completed={this.state.completeLoading} loading={this.state.startLoading} resetLoading={this.resetLoading} />
        {
          // The rest of the component.
        }
      </div>
    );
  },
 
  // Add these 3 methods
  startLoading: function(){
        this.setState({startLoading: true});
    },
 
    endLoading: function(){
    this.setState({completeLoading: true});
  },
 
    resetLoading: function() {
    this.setState({
      startLoading: false,
      completeLoading: false
    });
  }
});
 

3. In your CSS

Add the content of stylesheet.css to your CSS.

Usage

Call this.startLoading() to start the loading animation. Call this.endLoading() to stop the loading animation.

For example, in an ajax call:

gettingNewStuff: function(){
 
  this.startLoading();
  
  $.ajax({
    url: '/get_new_stuff',
    type: 'get',
    success: function(){
    
      // success feedback
      this.endLoading();
      
    },
    error: function(){
    
      // error feedback
      this.endLoading();
      
    }
    
  })
}