A change version from react-circle

circle.js

class Circle extends Component {
  static defaultProps = {
    number: 0,
    max_number: 255,
    animate: true,
    animationDuration: '1s',
    showPercentage: true,
    showPercentageSymbol: true,
    progressColor: 'rgb(76, 154, 255)',
    bgColor: '#ecedf0',
    textColor: '#6b778c',
    size: '60',
    lineWidth: '25',
    percentSpacing: 10,
    textStyle: { font: 'bold 8rem Helvetica, Arial, sans-serif' }
  }

  render() {
    const { number, max_number, size, bgColor, progressColor, lineWidth, animate, animationDuration, roundedStroke, responsive, onAnimationEnd, textColor, textStyle, percentSpacing, showPercentageSymbol } = this.props;
    const radius = 175;
    const diameter = Math.round(Math.PI * radius * 2);
    const getOffset = (val = 0) => Math.round((100 - Math.min(val, 100)) / 100 * diameter);
    const progress = parseInt(number * 100 / max_number);
    const strokeDashoffset = getOffset(progress);
    const transition = animate ? `stroke-dashoffset ${animationDuration} ease-out` : undefined;
    const strokeLinecap = roundedStroke ? 'round' : 'butt';
    const svgSize = responsive ? '100%' : size;
    return (
      <svg width={svgSize} height={svgSize} viewBox="-25 -25 400 400">
        <circle stroke={bgColor} cx="175" cy="175" r="175" strokeWidth={lineWidth} fill="none" />
        <circle stroke={progressColor} transform="rotate(-90 175 175)" cx="175" cy="175" r="175" strokeDasharray="1100" strokeWidth={lineWidth} strokeDashoffset="1100" strokeLinecap={strokeLinecap} fill="none" style={{ strokeDashoffset, transition }} onTransitionEnd={onAnimationEnd} />
        <text style={textStyle} fill={textColor} x={radius} y={radius} textAnchor="middle" dominantBaseline="central">
          {number}{showPercentageSymbol && <tspan dx={percentSpacing}>%</tspan>}
        </text>
      </svg>
    );
  }
}