Create a circle progressbar in svg or css [duplicate] - html

Question

This question already has answers here:
CSS Progress Circle
(8 answers)
Closed 4 years ago.
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>