JSFiddle - React, Tailwind, and code Playground

CSS

.progress-meter .background {
  fill: #ccc;
}

.progress-meter .foreground {
  fill: #000;
}

.progress-meter text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
}

JavaScript

var width = 960,
    height = 500,
    twoPi = 2 * Math.PI,
    progress = 100,
    total = 200, // must be hard-coded if server doesn't report Content-Length
    formatPercent = d3.format(".0%");

var arc = d3.svg.arc()
    .startAngle(0)
    .innerRadius(100)
    .outerRadius(240);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var meter = svg.append("g")
    .attr("class", "progress-meter");

meter.append("path")
    .attr("class", "background")
    .attr("d", arc.endAngle(twoPi));

var foreground = meter.append("path")
    .attr("class", "foreground");

foreground.attr("d", arc.endAngle(twoPi * 0))

foreground.transition().duration(1500).attrTween("d", arcTween);

function arcTween() {
  var i = d3.interpolate(0, twoPi * 2/3);
  return function(t) {
    return arc.endAngle(i(t))();
  };
}
	
var text = meter.append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".35em");