Como crear una barra de progroso que incremente con React y que a su vez vaya sincronizada con un temporizador.

Estoy volviendo a hacer una website y me he decidido a hacerla con React ya que no lo practico en el trabajo y la verdad es que me gusta mucho todo el rollo de crear components.

Hoy quiero compartir como he hecho una barra progresiva <progress> que irá incrementando el atributo value cada segundo hasta llegar al 100% y a su vez crearemos un temporizador que disminuirá de 60 segundos a 0.

El uso que le he dado a este par de elementos sería el siguiente:

  1. El visitante rellena un formulario web y lo envía,
  2. lo re-dirigimos a una página donde le mostramos un mensaje de que su formulario ha sido enviado,
  3. en esta página mostramos el temporizador y barra de progreso,
  4. una vez concluya el tiempo lo re-dirigimos a otra página.

Obviamente nuestra web puede vivir sin todo esto pero he pensado que sería un nice touch :)

Vamos a ver un poco como lo he hecho, solo voy a mostrar un poco de sample code por lo que el copy/paste no te va a servir... Más abajo tienes el link de la repo en Github.

Primero empecemos con la sencilla lógica que he usado en los valores numéricos:

  • 1 minuto son 60 segundos,
  • setInterval usa milisegundos por lo que 1 segundo son 1000 milisegundos
  • el máximo valor para el atributo value de la etiqueta <progress> es 100
  • para buscar la correlación que hay entre cuanto hay que incrementar la barra por cada segundo tenemos que dividir 100/60 que nos da 1.666667

En mi caso he dado al usuario un eterno minuto para hacer algo o dejar que la web re-direccione por si sola. Cambiar los valores solo sería cuestión de jugar/cambiar con estos.

En el gist que añado podréis ver los comentarios explicativos de cada paso.

Esta es la repo de Github donde lo he usado ergos-react, el archivo está (por ahora) en src/routes/Success.js.

ergos-react es una repo en la que estoy trabajando donde alberga una website bilingüe la cual estoy convirtiéndola de Mustache.js a React.js. Un post está al caer :), estoy haciendo que todo el contenido bilingüe esté en un archivojson` y que sea React el que se encargue de decidir si debe de estar en un idioma u otro...

Fu__ing loving it, la verdad es que me gusta bastante React, pero como siempre últimamente de una simple página web acabas teniendo demasiados archivos. Lo único bueno es que a la hora de hacer cambios solo tienes que modificar pocos archivos. O no!

Saludos.

comments powered by Disqus