Create a circle progressbar in svg or css [duplica

Question

This question already has an answer here:

• CSS Progress Circle [closed] 4 answers

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 low. I am looking for something like image.

svg {
  height: 200px;
  margin: auto;
  display: block;
}

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

path.grey {
  stroke: lightgrey;
}

path.purple {
  stroke: purple;
  stroke-dasharray: calc(40 3.142 1.85);
  stroke-dashoffset: 80;
  / adjust last number for variance /
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
 <path class="grey" d="M40,90
    A40,40 0 1,1 70,90"
    style="fill:none;"/>
 <path class="purple" d="M40,90
    A40,40 0 1,1 70,90"
    style="fill:none;"/>
</svg>

Answer 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+"%"
})


function map(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}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 110 110">
<defs>
 <path id="thePath" d="M40,90
    A40,40 0 1,1 70,90"
    style="fill:none;"/>
</defs>
 <use xlink:href="#thePath" id="base" class="grey" />   
 <use xlink:href="#thePath" id="slider" class="purple" />
  
  <text id="theText" x="55" y="55" dominant-baseline="middle" text-anchor="middle">80%</text>
</svg>

<p><input id="theRange" type="range" min="0" max="100" value="80" step=".1" /></p>