Skip to main content
2 de 3
se añadieron 1006 caracteres en el cuerpo
Adri
  • 21
  • 3

Barra de progreso CSS según cronómetro

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>
Adri
  • 21
  • 3