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-loadingbar
Usage
;; ; Component { super; thisstate = progress: 0 error: false } { return <LoadingBar progress= thisstateprogress error= thisstateerror onErrorDone= thiserrorDone onProgressDone= thisprogressDone /> } // Callback { this } { this } ReactDOM
Usage With Full Props
{ return <LoadingBar id="loadingbar-id" className="custom loading-bar className" progress= thisstateprogress direction= thisstatedirection error= thisstateerror onErrorDone= thiserrorDone onProgressDone= thisprogressDone /> }
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: bosnaufalemail@gmail.com
- Skype Id: bosnaufal254
- twitter: @BosNaufal
License
MIT Copyright (c) 2016 - forever Naufal Rabbani