Percentage progess circle

#dashoffset & dasharray

HTML

<div class="circle">
  <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle class="back" cx="50" cy="50" r="40" stroke="#cddc39" stroke-width="4" fill="transparent" />
    <circle class="front" cx="50" cy="50" r="40" stroke="#9e9d24" stroke-width="4" fill="transparent" />
  </svg>
  <div class="precentage_wrapper">
    <input type="text" max="100" min="0" name="percentage" value="20">
  </div>
</div>

CSS

.circle {
  position: relative;
  width: 200px;
  height: 200px;
}

.front {
  transition: all 0.2s ease;
  stroke-dashoffset: 300;
  stroke-dasharray: 300;
  transform-origin: 50% 50%;
  background-color: white;
  transform: rotateZ(270deg);
}

.precentage_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input {
  border: 0;
  padding: 2px 3px;
  font-size: 22px;
  text-align: center;
  width: 100px;
  margin: 0 auto;
  background: transparent;
  color: #827717;
}

input:hover,input:focus{
    border: 1px solid;
}

JavaScript

var front = document.querySelector('.front');
var input = document.querySelector('input[name="percentage"]');
input.onchange = draw;
setTimeout(draw,300); //draw on load

function draw(e) {
  var v = parseFloat(input.value);
  if (v == undefined || v > 100 || v < 0) {
    return false;
  }
  v = 100 - v;
  var total = 252;
  var per = (total * v / 100) + 48;
  //console.log(per);
  front.style.strokeDashoffset = per;
}