Obtuve un script simple que crea una barra de progreso que se ejecuta durante 180 segundos. Después de ese tiempo, la barra de progreso envía al navegador a otro sitio web. Ver/ejecutar el código a continuación. Agregué un evento onclick a la barra de progreso con fines de prueba. Lo que quiero; Quiero poder pausar, restablecer y establecer un nuevo valor de tiempo de ejecución. Intenté usar document.getElementById('progressbar1').style.animationPlayState = 'paused'; para pausar la barra de progreso, pero desafortunadamente no sucede nada. ¿Tienen alguna pista sobre cómo pausar la barra de progreso?
function createProgressbar(id, duration, callback) { var progressbar = document.getElementById(id); progressbar.className = 'progressbar'; var progressbarinner = document.createElement('div'); progressbarinner.className = 'inner'; progressbarinner.style.animationDuration = duration; if (typeof(callback) === 'function') { progressbarinner.addEventListener('animationend', callback); } progressbar.appendChild(progressbarinner); progressbarinner.style.animationPlayState = 'running'; } addEventListener('load', function() { createProgressbar('progressbar1', '180s', function() { window.location.replace("gotomypage.html"); }); document.getElementById('progressbar1').addEventListener("click", function() { console.log ('TEST - Stop Progressbar'); document.getElementById('progressbar1').style.animationPlayState = 'paused'; }); }); .progressbar { width: 500px; margin: 25px auto; border: solid 1px #000; position: absolute; right:25%; left:50%; margin-left:-250px; } .progressbar .inner { height: 15px; animation: progressbar-countdown; animation-duration: 40s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: paused; animation-timing-function: linear; } @keyframes progressbar-countdown { 0% { width: 100%; background: #0F0; } 100% { width: 0%; background: #F00; } } <div id="progressbar1"></div>¡Está seleccionando el elemento incorrecto para detener la animación! La animación se está ejecutando en #progressbar1 .inner
function createProgressbar(id, duration, callback) { var progressbar = document.getElementById(id); progressbar.className = 'progressbar'; var progressbarinner = document.createElement('div'); progressbarinner.className = 'inner'; progressbarinner.style.animationDuration = duration; if (typeof(callback) === 'function') { progressbarinner.addEventListener('animationend', callback); } progressbar.appendChild(progressbarinner); progressbarinner.style.animationPlayState = 'running'; } addEventListener('load', function() { createProgressbar('progressbar1', '180s', function() { window.location.replace("gotomypage.html"); }); document.getElementById('progressbar1').addEventListener("click", function() { console.log ('TEST - Stop Progressbar'); document.getElementById('progressbar1').getElementsByClassName('inner')[0].style.animationPlayState = 'paused'; }); }); .progressbar { width: 500px; margin: 25px auto; border: solid 1px #000; position: absolute; right:25%; left:50%; margin-left:-250px; } .progressbar .inner { height: 15px; animation: progressbar-countdown; animation-duration: 40s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: paused; animation-timing-function: linear; } @keyframes progressbar-countdown { 0% { width: 100%; background: #0F0; } 100% { width: 0%; background: #F00; } } <div id="progressbar1"></div>