Elemento Progressbar
Progressbar en un elemento gráfico de jQuery que nos permite simular una barra de progreso gráfica, similar a la del entorno Windows. Esto es útil cuando tenemos que cargar datos pesados por Ajax, ya que nos permite informar al usuario del progreso. Se necesita incluir la librería ui.progressbar, asi como ui.core (ambas se pueden sustituir por la librería global jquery-ui.js) y la última versión de jQuery. Además debemos de hacer uso de uno de los temas de jQuery-ui, recordar incluir el CSS de nuestro tema (pj: verde.css) y la carpeta de imágenes asociadas al tema.
La llamada para convertir un elemento en una barra de progreso es:
$("#divObjetivo).progress({options})
Donde la opción más común es:
- Value:valor = fija la barra en el valor especificado. El valor tiene que ser un número natural de 0 a 100.
Además podemos modificar directamente el valor de nuestra barra de progreso en cualquier momento haciendo uso de la propiedad “option-value”:
$('#progressbar').progressbar('option', 'value', valorNuevo);
En el siguiente ejemplo crearemos una barra de progreso haciendo uso de la librería jQuery user interface y usando un tema (skin) CSS asociado a ella. El valor de la barra de progreso lo iremos incrementando cada 100 milisegundos hasta llegar a 100.
<html>
<head>
<link type="text/css" href="verde/verde.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.progressbar.js"></script>
<script type="text/javascript">
var valorBarra = 0; // inicializamos a 0 el valor de la barra.
$(document).ready(function(){
// creamos la barra
$("#progressbar").progressbar({ value: valorBarra });
// cada 100 milisegundos aumentaremos el valor de la barra
window.setInterval(aumentar,100);
});
function aumentar()
{
//mientras el valor sea menor que 100 aumentaremos el valor
if(valorBarra < 100)
{
valorBarra++;
$("#valor").html(valorBarra);
$('#progressbar').progressbar('option',
'value', valorBarra);
}
else
{
$("#valor").html("Completado");
clearInterval(); //eliminamos el interval
}
}
</script>
</head>
<body>
<div id="progressbar"></div>
<br>
<span>Valor: </span><span id="valor">1</span>
</body>
</html>
El resultado en el navegador nos mostraría lo siguiente:
