Is it possible to create a progress bar that reflects the countdown timer displayed in a div? The timer counts down from 7 minutes and is shown as follows:
<div id = "quiz-time-left"> 0:06:24 </ div>I want to ensure that if the page is reloaded, the progress bar does not reset. Can this be achieved using CSS and a script?
The following is the CSS code for the 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;
}
}
Here is the corresponding HTML code:
<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>
Your assistance would be greatly appreciated. Thank you and best regards.