Skip to main content
3 de 3
Más concreto
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?

Lo quiero utilizar en un examen en Moodle (3.1) para mostrar la barra en vez del tiempo restante para finalizar el examen.

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