Estoy creando un sitio web que realiza algunos cálculos y luego traza un gráfico. Ahora, lo que quiero es que, cuando se esté realizando el cálculo, se muestre una animación de carga y, cuando finalicen los cálculos, esa animación desaparezca.
PD No tiene nada que ver con la carga de páginas, así que supongo que el cargador de páginas no es una opción.
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; }Este es el fragmento de código, ahora cuando la generación de permutación está en marcha, quiero una animación de carga. Cuando hago clic en el botón Enviar, se muestran los cambios de 'ninguno' a 'flexible'. Ahora, cómo volver a cambiar la pantalla a ninguna, cuando se realiza el cálculo y se traza el gráfico.
Una forma de hacerlo es con setTimeout , que establece un tiempo de espera antes de que suceda algo. Por ejemplo, en este código aquí abajo, carga un gif que está cargando un gif. Después de 2-3 segundos, los resultados van de display:none a display:block; y viceversa con el gif. Se muestra durante 2 segundos y, después de ese tiempo de espera, obtiene un estilo de 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(); });