Saltar al contenido

20-Barras de progreso.

HTML5 nos brinda la capacidad de desarrollar impresionantes barras de progreso. En combinación con JavaScript, podemos crear barras dinámicas que reflejen el progreso de una tarea, un proceso, una medida o cualquier otro elemento que podamos representar mediante los elementos HTML que exploraremos hoy.

Barras de progreso

Con la etiqueta <progress> podemos crear una barra de progreso.

Barra de Progreso 1 Código
Barra de Progreso 1 Vista

Atributos

  • Min: su valor será el valor mínimo de la barra de progreso.
  • Max: su valor será el valor máximo de la barra de progreso.
  • Value: su valor será un valor entre el valor mínimo y el valor máximo y se reflejara en la barra de progreso.

Ejemplo:

Barra de Progreso 2 Código
Barra de Progreso 2 Vista

Para crear una barra de progreso dinámico, que obedezca a eventos se requiere conocimientos de programación en javascript.

Mientras tanto lo puedes utilizar estático de diferentes formas, como quieras.
Como ejemplo puedes utilizarlo como indicar el nivel (inicial, medio y Avanzado), en un juego, explicación, clase, etc.

No te olvides de compartir en...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *