Is there a way to retain the progress of the countdown timer with a progress bar on page reload? Here is an example of what I am trying to achieve: https://codepen.io/Rudchyk/pen/qNOEGj
<div id="progressBar">
<div class="bar"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
var seconds = {$timer_limited->sec}; // 10000
$(document).ready(function () {
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(seconds, seconds, $('#progressBar'));
});
</script>
<style>
#progressBar {
width: 100%;
height: 4px;
background-color: #DDDFE2;
}
#progressBar div {
height: 100%;
line-height: 22px;
width: 0;
background-color: #D03637;
}
</style>
Any suggestions on how to save and restore the progress when the page is reloaded?