Progreso animado | Programar Plus

Jonathan Snook sobre la complejidad de animar el <progress> elemento. Si no está familiarizado, ese es el elemento que escupe una imagen similar a un gráfico de barras que indica una posición entre dos valores:

Este ejemplo tiene estilos personalizados, pero entiendes el punto.

La publicación de Jonathan muestra un método para animar un cambio en el valor de progreso usando CSS y un toque de JavaScript mientras se asegura de que se anima correctamente en todos los navegadores modernos. La demostración que hizo se ve bastante ordenada. Estoy seguro de que este va a ser uno de esos puestos a los que vuelvo una y otra vez.

Recientemente compartimos una publicación de Dave Rupert que adopta un enfoque SVG. Jeremias Menichelli también tiene un enfoque alternativo, creando una forma de anillo y convirtiéndola en un componente React.

Enlace directo →

(Visited 5 times, 1 visits today)