https://fizz.ca/themes/bookmark_2018/js/progress-demo.js?v=10.0.2

1(function ($) {
2
3    function gaugeProgress(percent) {
4    // Default value if percent is not defined
5    if (percent === undefined) {
6      percent = 0.4;
7    }
8
9    if (percent > 0.0 ) {
10      $('circle[class="gauge-fill"]').attr('stroke-linecap','round');
11    }
12
13    var gauge = 565;
14    var gaugeFill = gauge * percent;
15    $('circle[class="gauge-fill"]').attr('stroke-dasharray', gaugeFill + ', 943');
16  }
17
18  function needleProgress(percent) {
19    // Check if Internet Explorer or Edge
20    var isIE = (navigator.userAgent.indexOf("Edge") > -1 || navigator.userAgent.indexOf("Trident/7.0") > -1) ? true : false;
21
22    // Default value if percent is not defined
23    if (percent === undefined) {
24      percent = 0.4;
25    }
26
27    // Check percent and apply CSS class for needle color
28    if (percent > 0.0 && percent < 0.4 ) {
29      $('.needle-path').addClass('needle-path-blue');
30    }
31    else if (percent >= 0.4 && percent < 0.6 ) {
32      $('.needle-path').addClass('needle-path-purple');
33    }
34    else if (percent >= 0.6 ) {
35      $('.needle-path').addClass('needle-path-red');
36    }
37
38    var needleDegrees = 220;
39    var needleDegreeDiff = needleDegrees * percent;
40    var needleDegreeTransform = (-110 + needleDegreeDiff);
41
42    // Check if Internet Explorer or Edge and apply transform translate and rotate
43    if (isIE == true) {
44      $('.needle-path').attr('transform', 'translate(167, 70) rotate('+needleDegreeTransform+' 8 105)');
45    }
46    else {
47      $('.needle-path').css('transform', 'translate(167px, 70px) rotate('+needleDegreeTransform+'deg)');
48    }
49  }
50
51
52  $(document).ready(function() {
53    gaugeProgress();
54    needleProgress();
55  });
56
57})(jQuery);