<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Ejemplo barra de progresso con jquery-ui</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
var valor=0;
var int=0;
$(function() { // definimos los parametros de la barra de progresso
$("#progressbar").progressbar({ max:100, // definimos el valor maximo
value:valor, // definimos el valor actual
complete:function(){ // en el momento que se llene, detenemos el setInterval
clearInterval(int);
$(".button").button({disabled:false}); }
});
// definimos los parametros del boton
$(".button").button({ disabled:true,
label:"reiniciar"
});
// evento que se ejecuta al pulsar el boton
$(".button").click(function(){ valor=0;
$(".button").button({disabled:true}); // iniciamos el proceso nuevamente
var int=setInterval(aumentar,50);
});
/**
* Funcion que se ejecuta cada 50 milisegundos para aumentar
* la barra de progresso.
*/
function aumentar()
{ valor++;
// Modificamos el valor de la variable value del progressbar
$("#progressbar").progressbar("value",valor); }
// indicamos que cada 50 milisegundos ejecute la funcion aumentar
var int=setInterval(aumentar,50);
});
</script>
<style>
#progressbar {width:200px;float:left}
.button {float:left;margin:0px 10px;} nav {clear:both;padding-top:30px;} </style>
</head>
<body>
<div id="progressbar"></div>
<div class="button">Reiniciar</div>
<nav>
<a href="http://api.jqueryui.com/progressbar/" target="_blank">http://api.jqueryui.com/progressbar/</a>
<br><a href="http://www.lawebdelprogramador.com/" target="_blank">http://www.lawebdelprogramador.com/</a>
</nav>
</body>
</html>
Crear cuenta