Simplest Youtube Like Loading Bar Component For React JS
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
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) } />
)
}
custom Id in react-loadingbar component
custom className in react-loadingbar component
The Progress Percentage of react-loadingbar component
The Animation Direction of react-loadingbar component. You can fill it with 'right'
or 'left'
default is 'right'
Indicate the component to showing the error state.
Should change the parent state when the loadingbar has finished with its error state
Should netralize the parent's progress state to be 0
Just Contact Me At:
- Email: bosnaufalemail@gmail.com
- Skype Id: bosnaufal254
- twitter: @BosNaufal
MIT Copyright (c) 2016 - forever Naufal Rabbani