React Loading Bar

Simplest Youtube Like Loading Bar Component For React JS

DEMO

Install

You can import react-loading-bar to your react component file like this and process it with your preprocessor.

or

You can install it via NPM

npm install react-loadingbar

Usage

import React from 'react';
import ReactDOM from 'react-dom';

import LoadingBar from 'react-loadingbar';

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      progress: 0,
      error: false
    }
  }

  render(){
    return(
      <LoadingBar
        progress={ this.state.progress }
        error={ this.state.error }
        onErrorDone={ this.errorDone.bind(this) }
        onProgressDone={ this.progressDone.bind(this) } />
    )
  }

  // Callback
  errorDone(){
    this.setState({ error: false })
  }

  progressDone() {
    this.setState({ progress: 0 })
  }

}


ReactDOM.render(<App />, document.getElementById("app"))

Usage With Full Props

  render(){
    return(
      <LoadingBar
        id="loadingbar-id"
        className="custom loading-bar className"
        progress={ this.state.progress }
        direction={ this.state.direction }
        error={ this.state.error }
        onErrorDone={ this.errorDone.bind(this) }
        onProgressDone={ this.progressDone.bind(this) } />
    )
  }

Props

id (String)

custom Id in react-loadingbar component

className (String)

custom className in react-loadingbar component

progress (Number)

The Progress Percentage of react-loadingbar component

direction (String)

The Animation Direction of react-loadingbar component. You can fill it with 'right' or 'left' default is 'right'

error (Boolean)

Indicate the component to showing the error state.

onErrorDone (Function)

Should change the parent state when the loadingbar has finished with its error state

onProgressDone (Function)

Should netralize the parent's progress state to be 0

Thank You for Making this useful~

Let's talk about some projects with me

Just Contact Me At:

• Email: [email protected]
• Skype Id: bosnaufal254
• twitter: @BosNaufal

License

MIT Copyright (c) 2016 - forever Naufal Rabbani