Barras de tiempo en CSS con propiedades personalizadas | Programar Plus

Estaba trabajando en algo el otro día que necesitaba un temporizador visible. Había un precedente de interfaz de usuario para este tipo de temporizador en el proyecto. La gente no quería ver números descendiendo; era más ideal ver una “barra” vaciarse de llena a vacía. Lo menciono porque hay toneladas y toneladas de formas en las que podría acercarse a una interfaz de usuario de “temporizador”. Esta no es una exploración de todos ellos (una búsqueda en CodePen sería más útil allí), sino una exploración de la única forma que me resultó útil.

El tipo de temporizador que necesitaba era lo que el proyecto llama una barra de “tiempo redondo”. Se realiza una acción. Puede causar un tiempo de ronda, y la mayoría de las acciones posteriores se bloquean hasta que finaliza el tiempo de ronda. Entonces, una barra roja muy clara que marca la distancia era la interfaz de usuario correcta. Da una sensación de ritmo y flujo en el que puedes sentir el final del temporizador y cronometrar tu próxima acción.

a linear animación que reduce la barra a cero.

Configurar esto es bastante fácil…

Vamos a darnos una cosa padre/hijo, en caso de que queramos diseñar la parte vacía del contenedor en algún momento.

<div class="round-time-bar">
  <div></div>
</div>

Por ahora, vamos a diseñar la barra por dentro.

.round-time-bar div {
  height: 5px;
  background: linear-gradient(to bottom, red, #900);
}

Eso nos da una pequeña barra roja que podemos usar para el indicador de tiempo.

A continuación, debemos hacer que funcione, pero aquí es donde debemos pensar en la funcionalidad. ¡Un temporizador como este necesita saber cuánto tiempo está cronometrando! Podemos darle esa información directamente en el HTML. Esto no significa que estemos evitando JavaScript, lo estamos adoptando. Estamos diciendo, “oye JavaScript, por favor danos la duración como una variable y lo tomaremos desde allí”.

<div class="round-time-bar" style="--duration: 5;">
  <div></div>
</div>

De hecho, esta forma es muy amigable con el JavaScript moderno que maneja DOM. mientras eso --variable es correcto, es gratis volver a renderizar ese elemento DOM en cualquier momento y podemos asegurarnos de que el diseño lo maneje bien. Haremos una variación que haga eso.

Por ahora, hagamos que la animación suceda. Buenas noticias, es fácil. Aquí hay un fotograma clave de una sola línea:

@keyframes roundtime {
  to {
    /* More performant than animating `width` */
    transform: scaleX(0);
  }
}

Podemos “aplastar” la barra porque el diseño de la barra no tiene nada que se vea aplastado cuando la escalamos horizontalmente. Si lo hiciéramos, podríamos animar el width. No es un gran problema, especialmente porque no refluye nada más.

Ahora lo aplicamos a la barra:

.round-time-bar div {
  /* ... */
  animation: roundtime calc(var(--duration) * 1s) steps(var(--duration)) forwards;
  transform-origin: left center;
}

Mira cómo estamos tirando de eso --duration variable para establecer la duración de la animación? Eso hace el trabajo pesado. También lo estoy usando para establecer el mismo número de steps() por lo que “marca” hacia abajo. Ese “tictac” puede ser algo de la interfaz de usuario visual que le gusta (a mí me gusta), pero también se adapta a la idea de que JavaScript podría volver a representar esta barra en cualquier momento, y los tictacs hacen que sea menos probable que lo note. Usé un número entero para el valor de duración para que pudiera hacer una doble función como esta.

Sin embargo, si desea una animación fluida, podríamos hacerlo como una variación, como:

<div class="round-time-bar" data-style="smooth" ... />

Entonces no hagas los pasos:

.round-time-bar[data-style="smooth"] div {
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
}

Tenga en cuenta que también estamos usando un linear animación, que parece tener sentido para un temporizador. El tiempo, por así decirlo, no se relaja. ¿O sí? Lo que sea, es tu decisión. Si desea un temporizador que parezca acelerarse o ralentizarse en ciertos puntos, hágalo.

Podemos usar la misma API basada en atributos de datos de variación para cosas como variaciones de color:

.round-time-bar[data-color="blue"] div {
  background: linear-gradient(to bottom, #64b5f6, #1565c0);
}

Y una variación final es hacer que cada “segundo” tenga un ancho fijo. De esa manera, un temporizador de 10 segundos literalmente parecerá más largo que uno de 5 segundos:

.round-time-bar[data-style="fixed"] div {
  width: calc(var(--duration) * 5%);
}

Aquí está la demostración:

Observe el pequeño truco para reiniciar la animación CSS.

Ah, y oye, sé que hay un <meter> que es quizás un poco más semántico, pero trae su propia interfaz de usuario que no se puede animar como quería que estuvieran las cosas aquí, al menos no sin luchar contra él. Pero me pregunto si es más accesible. ¿Anuncia su valor actual de una manera útil? ¿Sería un temporizador más accesible si estuviéramos actualizando un <meter> en tiempo real con JavaScript? Si alguien sabe, puedo vincular una solución aquí.