<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de la visualización del progreso de las tareas con HTML5 y Javascript</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);
}else{
//tarea terminada, habilitar el botón y resetear variables
document.getElementById("startBtn").disabled = false;
done = false;
currProgress = 0;
}
}
</script>
</head>
<body>
<h2>Ejemplo de la visualización del progreso de las tareas con HTML5 y Javascript</h2>
<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>