0

I using easy pie chart library for visualisation.

I want to be able to count up with the same duration given in the easy pie chart animate key, everything works fine except the duration of the easy pie chart animate is faster than the duration of the loop counter value. How can I make the speed of both or the duration the same so they arrive at the same value?

html:

<div class="percentile">
        <div class="percentile-value" data-percent="99">
          <p class="circle"></p>
        </div>
      </div>

js:

$(function () {
  $(".percentile-value").easyPieChart({
    //your options goes here
    size: 500,
    lineWidth: 6,
    barColor: "#055a82",
    animate: {
      duration: 5000,
      enabled: true,
    },
  });
});
let counter = 99;
let circlePara = document.querySelector(".circle");
const slowLoop = (time) => {
  return new Promise((resolve) => setTimeout(resolve, time));
};

const increaseCounter = async () => {
  for (let i = 0; i <= counter; i++) {
    await slowLoop(180);
    circlePara.innerHTML = `${i}`;
  }
};

increaseCounter();

Thank you in advance.

dave
  • 158
  • 1
  • 12
  • Hi, do you have a CodePen/StackBlitz/etc link that shows all of the code? Thanks – Bodrov Aug 31 '22 at 21:34
  • The console's saying that there's an infinite loop happening around Line 18, and Code Pen's stopping the rest of the execution as a result. – Bodrov Aug 31 '22 at 21:45
  • @Bodrov I think it is becos the loop was to run for 99 times https://codepen.io/bayo96/pen/ZEozXoV – dave Aug 31 '22 at 21:56

0 Answers0