Data Circle Animate SVG

HTML

<svg id="data-circle"></svg>
<div>
  <button class="prev">Prev</button>
  <button class="next">Next</button>  
</div>

SCSS

svg {
  border: 1px solid;
  padding: 15px;
}

JavaScript

let steps = [
  {id: 1, title: 'Title1', desc: 'Decription11'},
  {id: 2, title: 'Title2', desc: 'Decription22'},
  {id: 3, title: 'Title3', desc: 'Decription33'},
  {id: 4, title: 'Title4', desc: 'Decription44'},
  {id: 5, title: 'Title5', desc: 'Decription55'},
  {id: 6, title: 'Title6', desc: 'Decription66'},
  {id: 7, title: 'Title7', desc: 'Decription77'},
  {id: 8, title: 'Title8', desc: 'Decription88'}
];

let radius = 2 * Math.PI * 300;

let mainColor = 'rgb(54, 79, 193)';


let draw = SVG('data-circle').size(600, 600);
		draw.viewbox(0, 0, 600, 600);

let gradient = draw.gradient('linear', function(stop) {
  stop.at(0.4, 'rgb(107, 91, 195)');
  stop.at(0.6, 'rgb(54, 79, 193)');
  stop.at(0.8, 'rgb(184, 214, 253)');
  stop.at(1, 'rgb(60, 85, 195)');
});

let circleGray = draw.circle().radius(300).stroke({color: '#c1c1c1', width: 10}).fill('none').move(0, 0);

let circleBlue = draw.circle().radius(300).stroke({color: gradient, width: 10, dasharray: 1884, dashoffset: 1884}).transform({rotation: -90, cx: 300, cy: 300}).fill('none').move(0, 0);

let point = draw.circle().radius(10).stroke({color: mainColor, width: 6}).fill('#fff');
		point.attr({ cx: 300, cy: 0 });
    /* point.style('transform-origin: center; transform: rotate(0deg);'); */
    /* point.style('transform-origin: center; transform: rotate(0deg)'); */
    point.rotate(0, 300, 300);
    
let percent = draw.plain('00%').font({
    famaly: 'Helvetica', size: 44, anchor: 'middle', weight: 'bold'
}).fill(mainColor).move(310, 300);

let title = draw.text(steps[0].title).font({
    famaly: 'Helvetica',size: 30,anchor: 'middle'
}).fill(mainColor).move(300, 350);
  
let description = draw.text(steps[0].desc).font({
  famaly: 'Helvetica', size: 18, anchor: 'middle'
}).fill(mainColor).move(300, 400);

/* Settings */
let progress = radius;

let count = 0;
let length = steps.length - 1;
let deg = 0;

let calcPercent = function() {
	let res = 100 - (progress * 100 / radius);
    
    if(res !== 0) return...