RSGUI-REACT progress ring component for ReactJS.

ProgressRing.tsx

import * as React from 'react'
import styles from './index.module.css'
import classNames from 'classnames'

interface Props {
	active?: boolean,
	radius?: number,
	width?: number,
	style?: any,
	color?: string
}

interface State {
	styles: {
		width?: number,
		height?: number,
		display?: string
	},
	stroke: number
}

export class ProgressRing extends React.Component<Props, {}> {
	public state: State = {
		styles: {
			height: (this.props.radius as number) || 30,
			width: (this.props.radius as number) || 30,
			display: this.props.active ? "inline-block" : "none"
		},
		stroke: (this.props.width as number) || 5
	}

	public oldState: any = { styles: {} }

	componentDidUpdate (oldProps: Props) {
		if (oldProps.active == this.props.active && oldProps.width == this.props.width) return;

		this.oldState.styles.display = this.state.styles.display
		this.oldState.stroke = this.state.stroke

		let newState: State = {
			styles: {
				display: this.props.active ? "inline-block" : "none",
				height: (this.props.radius as number) || 30,
				width: (this.props.radius as number) || 30
			},
			stroke: (this.props.width as number) || 5,
		}
	
		this.setState(newState)
	}

	render () {
		let classes = classNames({
			[styles["spinner"]]: true,
			[styles[`color-${this.props.color || "brand"}`]]: true
		})

		return (
			<div className={classes} style={{...this.props.style, ...this.state.styles}}>
				<svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" strokeWidth={this.props.width || 4}>
					<circle cx="33" cy="33" r="28" fill="none" />
				</svg>
				<svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" strokeWidth={this.props.width || 4}>
					<circle cx="33" cy="33" r="28" fill="none" />
				</svg>
				<svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" strokeWidth={this.props.width || 4}>
					<circle cx="33" cy="33" r="28" fill="none" />
				</svg>
			</div>
		)
	}
}