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.