SVGArc.css

.loader {
  width: 100px;
  height: 100px;
}

.path {
  stroke: #00AB2B;
  stroke-width: 2;
}

.progress {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

SVGArc.jsx

import React from 'react';
import cn from 'classnames';
import css from './SVGArc.css';

const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians)),
  };
};

const describeArc = (x, y, radius, startAngle, endAngle) => {
  const start = polarToCartesian(x, y, radius, endAngle);
  const end = polarToCartesian(x, y, radius, startAngle);
  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
  const d = [
    'M', start.x, start.y,
    'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,
  ].join(' ');
  return d;
};

const SVGArc = (props) => {
  const {
    value,
    className,
    pathClassName,
    progressClassName,
  } = props;

  const endAngle = value * 360;

  return (
    <svg
      className={cn(
        css.loader,
        className,
      )}
      viewBox="25 25 50 50"
    >
      <circle
        className={cn(
          css.path,
          pathClassName,
        )}
        cx="50"
        cy="50"
        r="20"
        fill="none"
      />
      {
        endAngle &&
        <path
          className={cn(
            css.progress,
            progressClassName,
          )}
          fill="none"
          d={describeArc(50, 50, 20, 0, endAngle === 360 ? 359.99 : endAngle)}
        />
      }
    </svg>
  );
};

export default SVGArc;