I am making a website which performs some calculations and then plots a graph. Now what I want is when the computation is going on, it should show a loading animation and when the calculations are done, that animation should disappear.
P.S. It has nothing to do with page loading so I guess page loader is not 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;
}
This is the code snippet, now when permutation generation is going on, I want a loading animation. When I click submit button, display changes from 'none' to 'flex'. Now how to change display back to none, when calculation is done & graph is plotted.
One way you can do it is with setTimeout which sets a timeout before something happens. For example, in this code down here, it loads and gif which is loading gif. After 2-3 seconds, the results go from display:none to display:block; and vice versa with the gif. It shows for 2 seconds, and after that timeout, it gets a style of display:none.
// Listen for submit
document.getElementById('loan-form').addEventListener('submit', function(e){
// Hide results
document.getElementById('results').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
setTimeout(calculateResults, 2000);
e.preventDefault();
});