@bigfishtv/cockpit/src/components/Spinner.js

import React, { Component } from 'react'

import Icon from './Icon'

/**
 * Amazing spinner component :O
 */
export default class Spinner extends Component {
	static defaultProps = {
		name: 'spinner',
		speed: 60,
		size: 24,
	}

	constructor(props) {
		super(props)
		this.state = { angle: 0 }
	}

	componentDidMount() {
		this.spinnerInterval = setInterval(this.incrementSpinner, this.props.speed)
	}

	componentWillUnmount() {
		clearInterval(this.spinnerInterval)
	}

	incrementSpinner = () => {
		const angle = (this.state.angle + 30) % 360
		this.setState({ angle })
	}

	render() {
		const { name, size } = this.props
		const { angle } = this.state
		const rotate = 'rotate(' + angle + 'deg)'
		const styles = {
			display: 'inline-block',
			transform: rotate,
			WebkitTransform: rotate,
			width: size,
			height: size,
			marginLeft: -size / 2,
			marginTop: -size / 2,
		}
		return (
			<div style={styles} className="spinner">
				<Icon name={name} size={size} />
			</div>
		)
	}
}