react-progress-label

<ProgressLabel
  progress={50}
  startDegree={60}
  progressWidth={8}
  trackWidth={20}
  cornersWidth={8}
  size={400}
  fillColor="black"
  trackColor="red"
  progressColor="green"
/>

<ProgressLabel
  progress={70}
  fillColor="rgb(248,247,243)"
  trackColor="#fff"
  progressColor="#ac884c"
  progressWidth={10}
  trackWidth={16}
  trackBorderWidth={1}
  trackBorderColor="rgb(232,223,209)"
  cornersWidth={5}
  size={130}
  text="70%"
  textProps={{
    x: '50%',
    y: '50%',
    dx: 8,
    dy: 8,
    textAnchor: 'middle',
    style: {
      fontSize: 28,
      fontWeight: '500',
      fill: '#ac884c'
    }
  }}
/>

<ProgressLabel
  progress={40}
  trackColor="#eeeeee"
  progressColor="#3498db"
  progressWidth={20}
  trackWidth={20}
  cornersWidth={10}
/>