I have created a circular progress bar on a HTML page that is ran on a PLC. I would like the animation to be smoother by increasing the amount of increments that it takes to complete the HTML canvas arc.
The variable read from the PLC increments 0.27 every second. My goal is to have my progress bar do 10 increments of 0.027 in-between each read from my PLC to make the progress bars animation appear smoother. At the minute I'm just viewing this value as a number I will sort the arc part of my code once I have got the 10 increments of 0.027 part working.
With the code i currently have the number jumps around a lot.
var cratio = ((v2.nodeValue/360)*100);
for (var i = 0; i < 10; i++) {
setInterval(function () {
var cratio2 = (cratio + 0.027);
var cratio3 = cratio2.toFixed(2);
document.getElementById("cycleratio").innerHTML = cratio3 + "%";
cratio = cratio3;
}, 10);
}
I have the entirity of the above code inside another setInterval loop that runs the function every 100ms then as you can see i increment through this function every 10ms.
I believe its not working because i'm not resetting the i variable and i am redefining cratio before all 10 increments of 0.027 are complete but i have tried for hours to fix this and have got nowhere.
I'd appreciate any help. Thank you :p
Based on your work arounds, I'm not quite sure that I've understood what you're doing but if you want to increase a number every 100 ms, It'll work for you.
var cratio = ((v2.nodeValue/360)*100);
const interval = setInterval(() => {
cratio += 0.027
document.getElementById("cycleratio").innerHTML = cratio.toFixed(2) + "%";
if (cratio >= 100) //or any number which is your max
clearInterval(interval)
}, 100)