Skip to main content
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Publicación reabierta por J. Castro, Shaz, Ivan Botero, toledano, JuankGlezz
Más concreto
Origen Enlace
Adri
  • 21
  • 3

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>

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>

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>
se añadieron 1006 caracteres en el cuerpo
Origen Enlace
Adri
  • 21
  • 3

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>

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.

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>
Publicación cerrada como "Necesita ser más específica" por Ivan Botero, Mariano, gugadev, Alvaro Montoro, toledano
Origen Enlace
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.