React Activity Indicator
Simple yet highly configurable activity indicator for React.
Demo
Installation
Install with NPM: npm install react-activity-indicator
Import in (es6):
import ActivityIndicator from 'react-activity-indicator'
The CSS file:
<link rel="stylesheet" type="text/css" href="path/to/activityindicator.css">
E.g. import in default using webpack:
import 'react-activity-indicator/src/activityindicator.css'
Usage
The component accepts these props.
number
: the number of activity indicatorsdefault: 3
diameter
: size of the loading indicatorsdefault: 20px
duration
: color transition durationdefault: 400
(ms)color
: color of the inactive loading indicator.default: transparent
activeColor
: color of the active loading indicator.default: black
borderRadius
: border radius of the loading indicators.default: 10%
borderWidth
: border width of the loading indicators.default: 1px
borderColor
: border color of the loading indicators.default: black
<ActivityIndicator number={5} diameter={40} borderWidth={1} duration={300} activeColor="#66D9EF" borderColor="white" borderWidth={5} borderRadius="50%" />
Example
class ExampleComponent extends Component { constructor(props) { super(props) this.state = { loaded: false, counter:0 } this.interval = setInterval(() => { if (this.state.counter > 5000) { this.setState({loaded: true}) clearInterval(this.interval) } this.setState({counter: this.state.counter+50}) },100) } render() { if (!this.state.loaded) { return (<div style={{textAlign: 'center'}}> Loading {this.state.counter} / 5000 elements <ActivityIndicator number={10} duration={200} activeColor="#0070bf" borderWidth={2} borderRadius="50%" diameter={25} /> </div>) } else { return ( <div style={{textAlign: 'center'}}> <h3>Loaded!</h3> </div>) } } } ReactDOM.render( <ExampleComponent />, document.getElementById('app') );
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
History
- Submitted to GitHub & NPM
Credits
Alex Dunmow
License
MIT license. Feel free to do whatever you want, but we have no liability or obligation for support.