title: Create a circle progressbar in svg or css
body: <p>I try to design a circle progressbar with some information inside. Something like this.
  <a href="https://i.stack.imgur.com/xhDrR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xhDrR.png" alt="enter image description here"></a></p>
  
  <p>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. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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 /
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100"&gt;
   &lt;path class="grey" d="M40,90
      A40,40 0 1,1 70,90"
      style="fill:none;"/&gt;
   &lt;path class="purple" d="M40,90
      A40,40 0 1,1 70,90"
      style="fill:none;"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>