Animated Circular Progress

<div class="cp">
  <svg viewBox="0 0 120 120">
    <defs><linearGradient id="cpg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#ff7a18"/><stop offset="1" stop-color="#ff477e"/></linearGradient></defs>
    <circle class="cp-bg" cx="60" cy="60" r="52"/>
    <circle class="cp-bar" id="bar" cx="60" cy="60" r="52"/>
  </svg>
  <div class="cp-num"><span id="num">0</span><i>%</i></div>
</div>
<button class="cp-btn" id="run">Run again</button>

*{box-sizing:border-box}
body{text-align:center}
.cp{position:relative;width:160px;height:160px;margin:0 auto;font-family:system-ui,sans-serif}
.cp svg{transform:rotate(-90deg);width:100%;height:100%}
.cp circle{fill:none;stroke-width:10}
.cp-bg{stroke:#eceef3}
.cp-bar{stroke:url(#cpg);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset 1.4s cubic-bezier(.5,0,.2,1)}
.cp-num{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;font-weight:800;color:#1a1f36}
.cp-num i{font-size:18px;font-style:normal;color:#8a91a6;margin-left:2px}
.cp-btn{margin-top:18px;padding:11px 24px;border:0;border-radius:10px;background:linear-gradient(135deg,#ff7a18,#ff477e);color:#fff;font-weight:700;cursor:pointer;font-family:system-ui,sans-serif}

var bar=document.getElementById('bar'),num=document.getElementById('num'),C=327;
function run(pct){
  bar.style.strokeDashoffset=C-(C*pct/100);
  var start=null;
  function step(t){if(!start)start=t;var p=Math.min((t-start)/1400,1);num.textContent=Math.round((1-Math.pow(1-p,3))*pct);if(p<1)requestAnimationFrame(step)}
  requestAnimationFrame(step);
}
document.getElementById('run').onclick=function(){bar.style.strokeDashoffset=C;num.textContent='0';setTimeout(function(){run(78)},60)};
setTimeout(function(){run(78)},300);