<svg width="100" height="100" viewBox="0 0 100 100">
  <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%"   stop-color="#2ed8a7"/>
    <stop offset="100%" stop-color="#a6ceff"/>
  </linearGradient>
  <circle stroke-linecap="round"  cx="50" cy="50" r="48" stroke="url(#linear)" stroke-width="4" fill="none" stroke-dasharray="315" stroke-dashoffset="100" stroke-mitterlimit="0" transform="rotate(-90 ) translate(-100 0)" />
</svg>
<div>
  <label for="stroke-dasharray">Stroke dasharray</label><br>
  <input type="range" min="0" max="315" value="315" id="stroke-dasharray"/>
</div>
<div>
  <label for="stroke-dashoffset">Stroke dashoffset</label><br>
  <input type="range" min="0" max="315" value="315" id="stroke-dashoffset"/>
</div>

<div id="output"></div>

svg {
  display: block;
}

$('#stroke-dasharray').on('input', function(){
  $('#output').html(this.value);
  $('circle').attr('stroke-dasharray', this.value);
});
$('#stroke-dashoffset').on('input', function(){
  $('#output').html(this.value);
  $('circle').attr('stroke-dashoffset', this.value);
});