I have implemented a progress bar on my multi-step form. But after submitting form progress bar is not showing as page reload. Find my code below.
$(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>You can use localStorage to persist the progress between page reloads.
Use window.localStorage.setItem('progress', 90); to set the progress of the current step in your form.
User window.localStorage.getItem('progress') to retrieve the progress you set previously.
So you would set the current progress in the localStorage, and on each refresh you retrieve it and show it again.