Semi-circle react svg progress bar.

svg-progress.jsx

const propTypes = {
  progressPercent: PropTypes.number,
};

const defaultProps = {
  progressPercent: 0,
};

const WIDTH = 224;
const HEIGHT = 112;
const STROKE_WIDTH = 6;
const RADIUS = HEIGHT - STROKE_WIDTH / 2;
const PROGRESS_FILL = Math.PI * RADIUS;
const PATH = `M${STROKE_WIDTH / 2},${HEIGHT} A1,1 0 0,1 ${WIDTH - STROKE_WIDTH / 2},${HEIGHT}`;

const TestStatsProgressBar = (props) => {
  const { progressPercent } = props;

  const progressValue = PROGRESS_FILL - PROGRESS_FILL / (100 / progressPercent);

  return (
    <div className="test-stats-progress-bar">
      <svg
        className="test-stats-progress-bar__svg"
        width={WIDTH}
        height={HEIGHT}
        viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
      >
        <g
          fillOpacity="0"
          strokeWidth={STROKE_WIDTH}
        >
          <path
            d={PATH}
            stroke="#e3e3eb"
          />
          <path
            d={PATH}
            stroke="#02a6e3"
            strokeDasharray={PROGRESS_FILL}
            strokeDashoffset={progressValue}
          />
        </g>
      </svg>
    </div>
  );
};

TestStatsProgressBar.propTypes = propTypes;
TestStatsProgressBar.defaultProps = defaultProps;

export default TestStatsProgressBar;