ProgressWheel.jsx

var cx = require('bem-classnames')
	, Close = require('../Close.jsx')
	, ProgressButton = require('./ProgressButton.jsx')

var progressWheel = React.createClass({

	render: function() {
		var {animate, error, percent, playButton} = this.props

		var classes = {
			wheel: {
				name: 'progressWheel'
				, modifiers: ['error', 'animated']
			}
			, play: {
				name: 'progressWheel__play'
				, states: ['hidden']
			}
			, inner: {
				name: 'progressWheel__inner'
				, modifiers: ['animated']
			}
		}

		var dashArray = percent !== undefined ? percent*2.5 : 20000

		return (
			<svg className={cx(classes.wheel, {error: !!error, animated: animate})} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
				<path className={cx(classes.play, {hidden: !playButton})} d="M0,12.5 L25,0 L25,14.15039 L25,25 L0,12.5 L0,12.5 Z" transform="translate(40, 42) scale(0.7, 0.7)"></path>
				<circle className="progressWheel__outer" cx="50" cy="50" r="40" stroke="#afafb7" fill="none" strokeWidth="8" strokeLinecap="round"/>
				<circle className={cx(classes.inner, {animated: animate})} id="circle" cx="50" cy="50" r="40" stroke="#5cffd6" fill="none" strokeWidth="8" strokeLinecap="round" strokeDasharray={`${dashArray},20000`} />
			</svg>
		)
	}
})

module.exports = progressWheel

Made for a file uploader

• while uploading it's just updated as upload percent state changes <ProgressWheel percent={s.uploadProgress} />
• If this.props.animated is set it adds --animated and has a css spinner animation
• this.props.playButton shows a triangle in the center
• this.props.error just changes the colour, will probably have a symbol in future