React Loading Bar
Simplest Youtube Like Loading Bar Component For React JS
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-loadingbarUsage
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