Buenas, quiero mostrar una barra de progreso según una cuenta atrás de 7 minutos que se muestra en un div: <div id="quiz-time-left">0:06:24</div>
El problema es que necesito que si se recarga la página no se resetee. ¿Sería posible con CSS y un script que la barra represente lo que muestra el cronómetro?
Un saludo y muchas gracias.
CSS
#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>