Sigueme por RSS! RSS

Matando el tiempo con la ProgressBar de JQuery UI







<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>ProgressBarUI demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/ui-lightness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<style>
.ui-progressbar .ui-progressbar-value{
    background-image: url('http://jqueryui.com/resources/demos/progressbar/images/pbar-ani.gif');
}
.ui-progressbar{
    height: 20px;
    margin-bottom: 2px;
}
#porcentaje{
    margin: 0 auto;
    font-size: 12px;
}
#contenedor{
    margin: 0 auto;
    text-align: center;
    float: left;
    width: 99%;
}
</style>
</head>
<body>
<div id="contenedor">
    <div id="progressbar"></div><div id="porcentaje"></div>
</div>
<script>
$("#progressbar").progressbar({value: 0});
function progressBar(){

    var value = $("#progressbar").progressbar( "option", "value" );
    $('#porcentaje').html((value + 1) + '%');

    $("#progressbar").progressbar("option","value",(value+1));

    if(value == 99){
        clearInterval(continua);
        $('#porcentaje').html('-- completo!!');
        $("#progressbar").progressbar("option",'value',0);
        return;
    }
}
continua = setInterval("progressBar()",50);
</script>
</body>
</html>

2 comentarios: Suscribete a los comentarios por RSS

Luis Alberto Buelvas Cogollo

amigo tengo una incógnita no se como hacer que el ciclo se repita cada ves que yo lo requiera ejemplo cargo un div y antes de terminar de cargar el div el me va indicanto los porcentajes la pregunta es porque al momento de intentarlo con un nuevo div no me genera la barra nuevamente sino que ya deja de activarse la carga

Reinaldo Cassiani (cass)

Hola, muestrame tu código y se un poco más especifico para poder ayudarte. ¿Lo que quieres es mostrar la ProgressBar en dos divs en la misma página?

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.