Я использую код, найденный здесь, чтобы создать круг прогресса:http://codepen.io/JMChristensen/pen/Ablch

Но я не хочу, чтобы он был таким большим, поэтому я изменил радиус круга для внутреннего и внешнего круга на 40 вместо 90. Проблема в том, что после того, как я это сделал, круг, отображающий процент, перестает работать, независимо от того, какой процент я набираю в круг не меняется и всегда кажется на 100%.

вот 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">

я думаю, что это как-то связано с штрих-смещением, рассчитанным в js, но я не могу понять, какая математика стоит за ним.