Currently, I am working on a section of code that renders a simple loading bar.
const smallSpinner = document.getElementById('spinner-small').getContext('2d');
let pointToFill = 4.72;
let cw = smallSpinner.canvas.width; //Returns canvas width
let ch = smallSpinner.canvas.height; //Returns canvas height
let diff;
let fillSmallSpinner = (startingPointParam = 0) => {
diff = ((startingPointParam / 100) * Math.PI * 2 * 10);
smallSpinner.clearRect(0, 0, cw, ch);
smallSpinner.lineWidth = 5;
smallSpinner.strokeStyle = '#d40511';
/* smallSpinner.textAlign = 'center';
smallSpinner.font = "25px monospace";
smallSpinner.fillText(no + '%', 50, 55); */ //uncomment this if you need percent progress inside spinner
smallSpinner.beginPath();
smallSpinner.arc(50, 50, 40, pointToFill, diff / 10 + pointToFill);
smallSpinner.stroke();
if (startingPointParam >= 100) {
clearTimeout(fill);
}
startingPointParam++;
}
let small = setInterval(fillSmallSpinner, 50);
The issue arises when "startingPointParam" is passed as a function parameter instead of being defined as a normal variable like this:
let startingPointParam = 0;
It seems to work perfectly fine with the predefined starting point at 0%, but it fails when I try to make it more versatile by passing the starting point as a function parameter. Can anyone provide insights on how to resolve this?