Create A Circle Progressbar In Svg Or Css

I try to design a circle progressbar with some information inside. Something like this. I have svg but I cant write inside circle also. The start and end point distance is very lo

Solution 1:

This is my solution; In order to calculate the path's length you may use the path.getTotalLength() method.

In order to center the text around a point (the center of the SVG canvas in this case) use dominant-baseline="middle" text-anchor="middle"

theRange.addEventListener("input",()=>{
  let v=220.6 - map(theRange.value,0,100,0,220.6);
  thePath.style.strokeDashoffset = v
  theText.textContent = theRange.value+"%"
})


functionmap(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

svg {
  height: 200px;
  margin: auto;
  display: block;
  border:1px solid;
  overflow:visible
}

path {
  stroke-linecap: round;
  stroke-width: 2;
}

.grey {
  stroke: lightgrey;
}

.purple {
  stroke: purple;
  stroke-dasharray: 220.6;
  stroke-dashoffset: 44.12; 
}

p{text-align:center}

<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 110 110"><defs><pathid="thePath"d="M40,90
    A40,40 0 1,1 70,90"style="fill:none;"/></defs><usexlink:href="#thePath"id="base"class="grey" /><usexlink:href="#thePath"id="slider"class="purple" /><textid="theText"x="55"y="55"dominant-baseline="middle"text-anchor="middle">80%</text></svg><p><inputid="theRange"type="range"min="0"max="100"value="80"step=".1" /></p>