im den hier gefundenen Code verwenden, um einen Fortschrittskreis zu erstellen:http: //codepen.io/JMChristensen/pen/Ablc

Aber ich möchte nicht, dass es so groß ist, also habe ich den Kreisradius für den inneren und äußeren Kreis auf 40 anstatt auf 90 geändert. Das Problem ist, dass der Kreis mit dem Prozentsatz nicht mehr funktioniert, egal welchen Prozentsatz ich eingebe Der Kreis ändert sich nicht und scheint immer bei 100% zu sein.

hier ist der html:

<h1>SVG Circle Progress</h1>
<h2>Based off of CSS3 circle progress bars</h2>

    <div id="cont" data-pct="100">
    <svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle r="40" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
      <circle id="bar" r="40" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    </svg>
    </div>
    <label for="percent">Type a percent!</label>
    <input id="percent" name="percent">

Ich denke, es hat etwas mit dem Strich-Dashoffset zu tun, der im js berechnet wurde, aber ich kann die Mathematik dahinter nicht wirklich verstehen.