setTimeout(function() { $(".counter-module").addClass("active"); }, 200); //Credits https://codepen.io/rachsmith/pen/BqpCd var canvasSize = 240, centre = canvasSize / 2, radius = canvasSize * 0.8 / 2, s = Snap(".percentage-circle"), path = "", arc = s.path(path), startY = centre - radius, percDiv = document.getElementById("percentage"), input = document.getElementById("percentage-circle__input"); function run(percent) { var endpoint = percent * 359.99; Snap.animate( 0, endpoint, function(val) { arc.remove(); var d = val, dr = d - 90; (radians = Math.PI * dr / 180), (endx = centre + radius * Math.cos(radians)), (endy = centre + radius * Math.sin(radians)), (largeArc = d > 180 ? 1 : 0); path = "M" + centre + "," + startY + " A" + radius + "," + radius + " 0 " + largeArc + ",1 " + endx + "," + endy; arc = s.path(path); percDiv.innerHTML = Math.round(val / 360 * 100) + "%"; }, 1200, mina.easeinout ); } run(input.value / 100);