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 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

<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

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.