CODEWITHSUNDEEP
javascriptcss
Adri
Adri

Reputation: 41

Progress bar according to countdown

I want to display a progress bar based on a countdown of 7 minutes that is displayed in a div: <div id = "quiz-time-left"> 0:06:24 </ div>

I need if the page is reloaded don´t reset the progress bar. Would it be possible with CSS and a script that the bar represents what the timer displays?

I use this css progress bar:

 #quiz-time-left {    
width: 0;
    height: 100%;
    -webkit-animation: progreso 420s linear;
            animation: progreso 420s linear;
color: #eb7260;
background: #eb7260;
 }
#page-mod-quiz-summary #quiz-timer {
    text-align: center;
    display: none;
position: absolute;
    left: -50px;
    top: -50px;
}
#quiz-timer {
border: 2px solid #eb7260;
text-indent: -9999px;
display:block;
    font-size: 0px;
    height: 35px;
}
@-webkit-keyframes progreso {
    0% {
        width: 100%;;
    }
    100% {
        width: 0;
    }
}

@keyframes progreso {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

html

<div id="quiz-timer" role="timer" aria-atomic="true" aria-relevant="text" style="display: block;">Time left: <div id="quiz-time-left">0:06:41</div></div>

Thank you. Best regards.

Upvotes: 0

Views: 441

Answers (2)

Michelangelo
Michelangelo

Reputation: 5958

You could implement something like this:

Make sure you save time left in localStorage 

window.onbeforeunload = function(timeLeft) {
       localStorage.setItem('countDown', timeLeft);
    }

When loading the page check if there is an item called countDown and resume countDown with the value:

if(localStorage['countDown'] {
    resumeCountdown(localStorage.getItem('countDown');
}

Upvotes: 1

Julien Vernay
Julien Vernay

Reputation: 315

What you can do is using localStorage to store the current state of the timer and each second decrease this number.

So when the page has finished loading, test if localStorage is undefined, if it is then set it to 420. If localStorage != undefined then resume the animation from the time stored in localStorage.

Upvotes: 1

Related Questions