estou usando o código encontrado aqui para criar um círculo de progresso:http://codepen.io/JMChristensen/pen/Ablch

Mas eu não quero que ele seja tão grande, então mudei o raio do círculo para o círculo interno e externo para 40 em vez de 90. O problema é depois que faço o círculo que exibe a porcentagem para de funcionar, independentemente da porcentagem digitada no o círculo não muda e sempre parece estar em 100%.

aqui está o 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">

Eu acho que tem algo a ver com o traço-traço calculado no js, mas eu realmente não consigo descobrir a matemática por trás dele.