CODEWITHSUNDEEP
jqueryprogress-barcounter
Md. Shahadat Hossain
Md. Shahadat Hossain

Reputation: 11

making a counter with jquery-circle-progress plugin

with jquery-circle-progress plugin how do I make a counter which can count up to a definite number and the number should be taken from HTML markup.I have made it but it can't work!

<div class="circle" data-value="0.75" data-thickness="04">
   <span>6587</span>
</div>

<script>
    $('.circle').circleProgress({
      fill: {gradient: ['red', 'orange']},
      startAngle: -Math.PI / 2,
      size: 133
    }).on('circle-animation-progress', function(event, progress) {
      var x = parseInt($('.circle span').text());
      $(this).find('span').html(Math.round(x*progress));
  });
</script>

Upvotes: 1

Views: 1624

Answers (1)

Neil
Neil

Reputation: 14313

You have to grab the max circle progress outside of the function.

temp = parseInt($(".circle span").text())
$('.circle').circleProgress({
    fill: {gradient: ['red', 'orange']},
    startAngle: -Math.PI / 2,
    size: 133
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('span').html(parseInt(progress*temp));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
<div class="circle" data-value="0.75" data-thickness="04">
   <span>6587</span>
</div>

Upvotes: 1

Related Questions