Jquery circle progress shows wrong percentage

Question

I am using the following jquery circle-progress loop, I recently noticed a problem with a value of 0.29. It should show 29%, but 28% is displayed instead.

https://github.com/kottenator/

$(document).ready(function($) {
 $('.progressbar').each(function () {
    var elementPos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
    var percent = $('input[id$=hdProfitPerc]').val();  //$(this).find('.circle').attr('data-percent');
    var percentage = parseInt(percent, 10) / parseInt(100, 10);
    var animate = $(this).data('animate');
    var Profit = $('input[id$=hdProfit]').val();
    //alert($('input[id$=hdProfitPerc]').val());

    var clr

    if (percent < 0) {
        clr = 'red'
    }
    else {
        clr = 'green'
    }

    if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
        $(this).data('animate', true);
        $(this).find('.small-circle').circleProgress({
            startAngle: -Math.PI / 2,
            value: 0.29, //percentage,
            thickness: 8,
            fill: {
                color: clr
            }
        }).on('circle-animation-progress', function (event, progress, stepValue) {
            //$(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%');
            $(this).find('div').text(parseInt(stepValue * 100) + '%');
        }).stop()
         .on('circle-animation-end', function (event) {
             $(this).find('#GP').html(Profit);
         })
    }
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kottenator/jquery-circle-progress/1.2.0/dist/circle-progress.js"></script>
<div id="div_progressbar" runat="server">
  <div class="progressbar" style="padding-left: 80px;">
    <div class="small-circle">
      <div></div>
      <span id="GP" style="color: black"></span>
    </div>
  </div>
</div>

Run codeHide result

If I change the value from 0.29 to 0.291, then it works.

Answer 1

This fix is:

   $(this).find('div').text(Math.round(parseFloat(stepValue * 100)) + '%');

Or simply: $(this).find('div').text(Math.round(stepValue * 100) + '%');

Demo:

https://jsfiddle.net/tq4jok5r/2/

After the tests, I noticed that this particular number (28,999999xxxx) is rounded to a smaller integer ... PS Works fine with more different values, checked a few ...