Con el elemento de progreso o avance, las páginas en HTML5 pueden mostrar el progreso de una tarea, por ejemplo una descarga o una actividad de fondo o background.
En este tutorial voy a mostrar cómo utilizar el elemento de progreso en tus páginas, con una simple función de JavaScriptque actualiza el elemento de progreso. A día de hoy este elemento sólo es compatible con Firefox, Chrome y Opera, se está desarrollando para Internet Explorer y Safari, pero todavía no se puede confiar que funcione en éstos últimosnavegadores.
Para la demostración, simplemente se va a actualizar el elemento de progreso a través de un timeout de JavaScript, aunque el ejemplo se puede exportar y adaptar a las necesidades de cada uno.
Este ejemplo se inicia al pulsar un botón, el cual se desactiva mientras se está ejecutando la tarea, al mismo modo se va actualizando la barra de progreso y un indicador textual. Cuando la tarea se ha completado, el botón se activará de nuevo y el usuario puede iniciar la tarea de nuevo si así lo desea.
Este ejemplo se inicia al pulsar un botón, el cual se desactiva mientras se está ejecutando la tarea, al mismo modo se va actualizando la barra de progreso y un indicador textual. Cuando la tarea se ha completado, el botón se activará de nuevo y el usuario puede iniciar la tarea de nuevo si así lo desea.
Crear una página
Crea tu página HTML utilizando el siguiente esquema:
<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html>
Pondremos nuestras funciones y código JavaScript entre las etiquetas head. Obviamente también lo podemos sacar a un archivo .js e incluirlo en el html.
Agregar el elemento de progreso
Agregar el elemento de progreso en el body de nuestra página. Añadimos un breve textos descriptivo
<p>Barra de progreso:</p> <progress id="prog" value="0" max="100"></progress>
Simplemente indicamos a nuestra barra de progreso que la tarea empieza desde 0. El valor máximo es 100, que es lo que aparecerá cuando la tarea se haya completado.
Proporcionar interacción con el usuario
Vamos a permitir que el usuario inicie el progreso de la tarea presionando un botón. También se indicará el porcentaje de avance mediante un texto.
<input id="startBtn" type="button" value="start" onclick="startProgress()"/> <div id="numValue">0%</div>
El elemento de entrada iniciará la ejecución de la tarea, lo que hará que la función de JavaScript inicie la actualización del elemento de avance. También vamos a actualizar el div con el indicador de porcentaje a medida que avanza la tarea.
El código JavaScript
Ahora vamos a agregar el código JavaScript que indica el progreso de nuestra tarea.
//progreso actual var currProgress = 0; //esta la tarea completa var done = false; //cantidad total de progreso var total = 100;
Agregamos la función que llamaremos para iniciar el proceso:
//funcion para actualizar el progreso
function startProgress() {
}
Dentro de la función, en primer lugar debemos recuperar las referencias a los elementos de la página que estamos trabajando:
//recuperamos el elemento de progreso
var prBar = document.getElementById("prog");
//get the start button
var startButt = document.getElementById("startBtn");
//recuperamos el valor del texto
var val = document.getElementById("numValue");
Tenemos que actualizar el elemento de barra de progreso y el elemento textual, así como deshabilitar el botón mientras la tarea se está desarrollando, lo haremos de la siguiente manera:
//deshabilitamos el botón startButt.disabled=true;
Cuando la tarea termine, volvemos a habilitar el botón. Ahora tendremos que recuperar y actualizar la barra de progreso con el dato actual:
//actualiza la barra de progreso prBar.value = currProgress;
Esto hará que el indicador visual con el texto muestre exactamente el mismo valor que la barra de progreso. Vamos a actualizar dicho indicador de texto. Podemos hacer que nuestros resultados aparezcan con números redondeados de la siguiente manera.
//actualizamos el indicador visual con el texto val.innerHTML = Math.round((currProgress/total)*100)+"%";
La próxima vez que llamemos a la función, incrementamos el progreso de la tarea:
//incrementamos el valor del progreso cada vez que la función se ejecuta currProgress++;
Cuando lleguemos a 100 indicamos a la función que debe parar
//comprobamos si hemos terminado if(currProgress>100) done=true;
Hemos seteado la variable que hemos declarado fuera de la función para que podamos referirnos a ella cada vez que se ejecute la función. Ahora vamos a adaptar a lo que ocurre si la tarea se ha completado o no:
// sino hemos terminado, volvemos a llamar a la función después de un tiempo
if(!done)
setTimeout("startProgress()", 100);
//tarea terminada, habilitar el botón y resetear variables
else
{
document.getElementById("startBtn").disabled = false;
done = false;
currProgress = 0;
}
Si la tarea no se ha completado, simplemente llamamos otra vez a la función después de un tiempo de espera.
conclusión
Como he comentado antes, este ejemplo es muy sencillo y apenas tiene una funcionalidad determinada, sino que la barra de carga comienza al pulsar un botón, pero es suficiente para explicar una nueva ventaja y funcionalidad de HTML5 como es la etiqueta progress. Al igual que con la mayoría de elementos de HTML5, no todas las etiquetas y funcionalidades son soportadas por todos los navegadores por lo que no es posible dar soporte a todos los usuarios, o hay que utilizar otras técnicas para replicar esta funcionalidad de barra de progreso en internet explorer u otros.
Código completo y demo
<!DOCTYPE html>
<html>
<head>
<title>Blog Pedro Ventura | Visualización del progreso de las tareas con HTML5 | Demo</title>
<script type="text/javascript">
//progreso actual
var currProgress = 0;
//esta la tarea completa
var done = false;
//cantidad total de progreso
var total = 100;
//funcion para actualizar el progreso
function startProgress() {
//recuperamos el elemento de progreso
var prBar = document.getElementById("prog");
//get the start button
var startButt = document.getElementById("startBtn");
//recuperamos el valor del texto
var val = document.getElementById("numValue");
//deshabilitamos el botón
startButt.disabled=true;
//actualiza la barra de progreso
prBar.value = currProgress;
//actualizamos el indicador visual con el texto
val.innerHTML = Math.round((currProgress/total)*100)+"%";
//incrementamos el valor del progreso cada vez que la función se ejecuta
currProgress++;
//comprobamos si hemos terminado
if(currProgress>100) done=true;
// sino hemos terminado, volvemos a llamar a la función después de un tiempo
if(!done)
setTimeout("startProgress()", 100);
//tarea terminada, habilitar el botón y resetear variables
else
{
document.getElementById("startBtn").disabled = false;
done = false;
currProgress = 0;
}
}
</script>
</head>
<body>
<p>Barra de progreso:</p>
<progress id="prog" value="0" max="100"></progress>
<input id="startBtn" type="button" value="start" onclick="startProgress()"/>
<div id="numValue">0%</div>
</body>
</html>
Lectura de interés: https://developer.mozilla.org/en-US/docs/HTML/Element/progress
Fuente: http://www.developerdrive.com/2012/07/displaying-the-progress-of-tasks-with-html5/
