¿Alguien puede ayudarme a hacer que esta barra de progreso sea más fluida?
Este es mi código javascript para la barra de progreso. Espero que puedas hacer algo con eso y ayudarme. Me gustaría mejorar la suavidad porque es muy intermitente en un tiempo de ejecución más alto.
window.addEventListener('message', (event) => { var item = event.data; if (item !== undefined && item.type === "ui") { if (item.display === true) { $(".container").fadeIn(700); var start = new Date(); var title = item.title; var maxTime = item.time; var text = item.text; var timeoutVal = Math.floor(maxTime/100); animateUpdate(); $('#notifyMsg').text(text); $('#notifyHead').text(title); function updateProgress(percentage) { $('#progb').css("width", percentage + "%"); } function animateUpdate() { var now = new Date(); var timeDiff = now.getTime() - start.getTime(); var perc = Math.round((timeDiff/maxTime)*100); if (perc <= 100) { updateProgress(perc); setTimeout(animateUpdate, timeoutVal); } else { $(".container").fadeOut(700); } } } else { $("#container").hide(); } } });Debe usar window.requestAnimationFrame en lugar de setTimeout . Esta función se ejecuta en cada ciclo de animación.
Y ajuste su función animateUpdate .
function animateUpdate() { var now = new Date(); var timeDiff = now.getTime() - start.getTime(); var perc = Math.round((timeDiff/maxTime)*100); if (perc <= 100) { updateProgress(perc); // Changed this line window.requestAnimationFrame(animateUpdate) } else { $(".container").fadeOut(700); } } Aquí están los documentos de window.requestAnimationFrame .