React Activity Indicator

Simple yet highly configurable activity indicator for React.

!See me work

Demo

Installation

Install with NPM: npm install react-activity-indicator

Import in (es6):

import ActivityIndicator from 'react-activity-indicator'

The CSS file:

``html

`

E.g. import in default using webpack:
`html
import 'react-activity-indicator/src/activityindicator.css'
`

Usage

The component accepts these props.

- number: the number of activity indicators default: 3
- diameter: size of the loading indicators default: 20px
- duration: color transition duration default: 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


`jsx
number={5}
diameter={40}
borderWidth={1}
duration={300}
activeColor="#66D9EF"
borderColor="white"
borderWidth={5}
borderRadius="50%"
/>
`

Example

`jsx
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 (

`

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature`
5. 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.