Passa al contingut principal

crear barra de progreso en html5

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 JavaScript que 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 últimos navegadores.


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.


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>


Demo: http://www.pedroventura.com/demos/html5/progress_bar.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/


Related posts:



  1. htaccess redireccionamiento con barra a sin barra Para eliminar la barra delante de la url tipo: www.pedroventura.com/blog_programacion/...

  2. 10 Herramientas online para ayudar y crear código HTML5 HTML5 cada vez es mas usado e integrado por aplicaciones...

  3. HTML5 Geolocalizacion de un usuario Una de las nuevas mejoras de HTML5 a parte del...

  4. Mostrar elementos secuencialmente con Jquery Desde el siguiente vídeo consejo, podremos aprender como hacer para...

  5. Google y HTML5. Otra genial animación esta vez en honor a Julio Verne Google una vez mas mostrando el poder de HTML 5....






via Pedro Ventura | Programación Web PHP, Tutoriales y Manuales de Cakephp, Sistemas linux, mejoras SEO, Wordpress, Proyectos personales y freelance http://www.pedroventura.com/desarrollo-web/crear-barra-de-progreso-en-html5/

Comentaris

Entrades populars d'aquest blog

10 alternativas a Cuevana para ver películas online

10 alternativas a Cuevana para ver películas online : Durante este último tiempo, en Cuevana se sucedieron varios “problemas” por los cuales hubo que ajustar algunas cosas antes de tiempo (como el rediseño del sitio), que dejaron a algunos usuarios ciertos problemas para acceder a las películas o series del portal. Pero realmente esto es algo que no incumbe a los usuarios y, como sabemos, existen muchas otras alternativas a Cuevana dando vueltas por Internet, que intentaremos presentar aquí mismo. Los sitios que repasaremos funcionan del mismo modo que Cuevana, mediante la instalación de un plugin que permite visualizar los videos de Megaupload o WUShare, entre otros servicios, en una calidad de imágen realmente excelente. Tal como sucede con el más popular servicio, todos ellos tienen publicidad que en algunos casos resulta insoportable, pero como dice Federico en DotPod “a caballo regalado no se le miran los dientes”. Alternativas a Cuevana 1. Moviezet Posiblemente el mejor clon d...

Learn Composition from the Photography of Henri Cartier-Bresson

“Do you see it?” This question is a photographic mantra. Myron Barnstone , my mentor, repeats this question every day with the hopes that we do “see it.” This obvious question reminds me that even though I have seen Cartier-Bresson’s prints and read his books, there are major parts of his work which remain hidden from public view. Beneath the surface of perfectly timed snap shots is a design sensibility that is rarely challenged by contemporary photographers. Henri Cartier-Bresson. © Martine Franck Words To Know 1:1.5 Ratio: The 35mm negative measures 36mm x 24mm. Mathematically it can be reduced to a 3:2 ratio. Reduced even further it will be referred to as the 1:1.5 Ratio or the 1.5 Rectangle. Eyes: The frame of an image is created by two vertical lines and two horizontal lines. The intersection of these lines is called an eye. The four corners of a negative can be called the “eyes.” This is extremely important because the diagonals connecting these lines will form the breakdown ...

Más de 50 de las mejores herramientas online para profesores

No es una exageración afirmar que hay ciento de aplicaciones educativas por ahí por la red, para todos los gustos y de todos los colores, por lo que es difícil tratar de recogerlas todas en un listado. Sin embargo, algunas destacan más que otras por su innovación y por su capacidad para conseguir adeptos, y esas son las que protagonizan la presente recopilación. Son 50 interesantes herramientas online basadas en las recopilaciones de EduArea , las muchas ya tratadas en Wwwhat’s new y las destacadas por la experiencia. 1. Dropbox : Un disco duro virtual con varios GB gratuitos y al que se accede desde casi cualquier dispositivo. Sin embargo, es muchísimo más que eso, de hecho ya comentamos 20 razones . 2. Google Drive : La evolución de Google Docs que suma a sus múltiples herramientas de creación de documentos, un considerable espacio virtual gratuito. 3. CloudMagic : Una extensión y una app multidispositivo para buscar información simultáneamente en Gmail, Twitter, Facebook, Evernote ...