You can use the below as a starting point- enter a % value in the input to see the circle animate.
Demo Fiddle
HTML
<svg viewbox="0 0 80 80" height="100" width="100">
<circle cx="40" cy="40" r="38" stroke="blue" fill="none" stroke-width="3" stroke-dasharray="239" stroke-dashoffset="239" />
</svg>
<br />
<input placeholder='Enter number 1-100..' type='number' />
CSS
svg {
width: 80px;
}
circle {
transition: all 1s ease;
border:1px solid black;
}
jQuery
$('input').on('keyup', function () {
var perc = 239 - (239 * ($(this).val() / 100));
perc=(perc > 239) ? perc = 239 : ((perc < 0) ? perc=0: perc);
$('circle').css('stroke-dashoffset', perc);
});