Implementé una barra de progreso en mi formulario de varios pasos. Pero después de enviar el formulario, la barra de progreso no se muestra cuando se vuelve a cargar la página. Encuentra mi código a continuación.
$(document).ready(function() { $('#myBtn').click(function(){ animateProgressBar(90); //mybtn is the button id of submit button in form }); function animateProgressBar(percentageCompleted) { $('#innerDiv').animate({ 'width':(1000*percentageCompleted)/100 },1000); $({counter: 1}).animate({counter:percentageCompleted},{duration:1000, step:function() { $('#innerDiv').text(Math.ceil(this.counter)+'%'); } }) } }); <div id="outerDiv" style="background-color:white; height:20px; width:1000px; padding:5px;"> <div id="innerDiv" style="background-color:#138581; height:19px; width:0px; color:white; text-align:center;"> </div></div>Puede usar localStorage para conservar el progreso entre recargas de página.
Utilice window.localStorage.setItem('progress', 90); para establecer el progreso del paso actual en su formulario.
Usuario window.localStorage.getItem('progress') para recuperar el progreso que configuró previamente.
Entonces, establecería el progreso actual en localStorage, y en cada actualización lo recuperaría y lo mostraría nuevamente.