I'm currently in the process of building a website that involves performing calculations and plotting a graph. My goal is to have a loading animation displayed while the computations are taking place, and then have it disappear once the calculations are complete.
P.S. This is unrelated to page loading, so I don't think using a page loader is an option.
document.getElementById("submitButton").onclick=function()
{
document.getElementById("loader").style.display='flex'; //this is the animation div
const permutationGeneration = (arr = []) => {
let res = []
const helper = (arr2) => {
if (arr2.length==arr.length)
return res.push(arr2)
for(let e of arr)
if (!arr2.includes(e))
helper([...arr2, e])
};
helper([])
delete result;
return;
};
var randArray=Array.from({length : size}, () => Math.floor(Math.random() * 100000));
timeReq = new Date().getTime();
permutationGeneration(randArray);
timeReq = ((new Date().getTime()) - timeReq)/1000;
}
Once the 'permutation generation' is happening, I'd like to show the loading animation. After clicking the submit button, the display changes from 'none' to 'flex'. Now, how can I change the display back to 'none' once the calculation is done and the graph is plotted?