import React, { Component } from 'react';

import LoadingBar from 'react-top-loading-bar';

export default class ExampleWithRefs extends Component {
  render() {
    return (
      <div>
        <LoadingBar
          height={3}
          color='#f11946'
          onRef={ref => (this.LoadingBar = ref)}
        />
        <button onClick={() => this.LoadingBar.continuousStart()}>
          Start Continuous Bar Loading
        </button>
        <button onClick={() => this.LoadingBar.staticStart()}>
          Start Static Bar Loading
        </button>
        <button onClick={() => this.LoadingBar.complete()}>Complete</button>
        <br />
        <button onClick={() => this.LoadingBar.add(10)}>Add 10</button>
        <button onClick={() => this.LoadingBar.add(10)}>Add 30</button>
      </div>
    );
  }
}

import React, { Component } from 'react';

import LoadingBar from 'react-top-loading-bar';

export default class App extends Component {
  state = {
    loadingBarProgress: 0
  };

  add = value => {
    this.setState({
      loadingBarProgress: this.state.loadingBarProgress + value
    });
  };

  complete = () => {
    this.setState({ loadingBarProgress: 100 });
  };

  onLoaderFinished = () => {
    this.setState({ loadingBarProgress: 0 });
  };

  render() {
    return (
      <div>
        <LoadingBar
          progress={this.state.loadingBarProgress}
          height={3}
          color='red'
          onLoaderFinished={() => this.onLoaderFinished()}
        />
        <button onClick={() => this.add(10)}>Add 10</button>
        <button onClick={() => this.add(30)}>Add 30</button>
        <button onClick={() => this.complete()}>Complete</button>
      </div>
    );
  }
}