Progressbar en Javascript que pare en 100%

crozer · #1 (**permalink**) 22/12/2009, 19:55

Hola, antes que nada, vean http://www.chrishonn.com/en/loader.html .

Ahi pueden apreciar esto en funcionamiento:

Código:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
        $(function() { animateProgressBar() });

        function animateProgressBar()
        {
                $("#progress-bar")
                .css("width", "0%")
                .animate(
                {
                        width: "100%"
                },
                1550, //Speed of loading bar
                animateProgressBar);
        }
</script>

Como se darán cuenta, la barra de progreso carga, llega al 100% y vuelve al inicio para nuevamente cargar y así sucesivamente. Lo que necesito, es añadirle algo a ese mismo código para que se detenga al llegar a 100%. Una vez que se detuvo, quiero que el sitio automáticamente redireccione al usuario a www.ejemplo.com.

Espero que me haya explicado bien y muchísimas gracias en adelantado.
Chris

jackson666 · #2 (**permalink**) 22/12/2009, 20:20

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Jackson666" />

	<title>Untitled 2</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#barra{background-color: black; height:20px; position: absolute; left: 0; top: 20px;}
#contenedor{position: relative; margin: auto; height: 60px; width: 100%;}
</style>
</head>
<body>
<div id="contenedor">
<div id="barra"></div>
</div>
<script type="text/javascript">
var x=0;
window.onload=progress();

function progress(){
    var timer;
   
    if(x<100){
        x++;
        document.getElementById('barra').style.width=x+'%';            
        timer=setTimeout('progress()',50);
    }else{
        clearTimeout(timer);
        location.href='tuPagina.htm';
    }
}
</script>
</body>
</html>

crozer · #3 (**permalink**) 22/12/2009, 20:43

Hola,
oye muchisimas gracias, es precísamente lo que necesito.. mi unico problema en realidad es que la funcion de animateProgressBar de la librería de JQuery es mucho más suave..

no hay otra forma?
gracias de todos modos y veré si puedo transformar un poco mi código..

jackson666 · #4 (**permalink**) 22/12/2009, 20:49

Si, tendrias que jugar un poco con las velocidades y tiempos, nada mas...

Tambien podrias achicar el tamaño de la barra a 2 o 3 px y ahi si que ni se va a notar, tambien tenes que jugar con el color de fondo y demas

Ademas lo que hago ahi es agrandar el tamaño de un div y eso consume mas procesador que, por ejemplo, agrandar el tamaño de una imagen.
Entonces en vez de un div con id="barra" podrias poner una imagen con ese id y estirarla
=)

Mira ahi me quedo re parecido al de esa pagina =P

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Jackson666" />

	<title>Untitled 2</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background-color: #072737;}
#barra{
    background-color: #A1CEE8;
    height:2px; 
    position: absolute;
    left: 0;
    top: 29px;
}
#contenedor{
    position: relative; 
    margin: 200px auto 0 auto; 
    height: 60px; 
    width: 80%;
    background-color: #132E3C; 
    border: 1px solid #10445E;
    padding: 0 20px 0 20px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="barra"></div>
</div>
<script type="text/javascript">
var x=0;
window.onload=progress();

function progress(){
    var timer;
   
    if(x<100){
        x++;
        document.getElementById('barra').style.width=x+'%';            
        timer=setTimeout('progress()',15);
    }else{
        x=0;
        progress();
        //clearTimeout(timer);
        //location.href='tuPagina.htm';
    }
}
</script>
</body>
</html>

Suerte y gracias por el karma!!

crozer · #5 (**permalink**) 22/12/2009, 21:25

jaja, y yo tonteando sin darme cuenta que el código de js iba en el <body> y no en la cabeza.
bueno, ahora si funciona.

muchas gracias y un saludo,
chris

EDIT: Hola, disculpa por la molestia nuevamente.. pero estube probando y probando, y quiero que la barra progrese de una manera más suave. Creo que es fácil es entender lo que quiero decir.. esos 'baches' no quiero que se vayan del todo, porque hace creer que está cargando el sitio, pero tampoco quiero que se vea como una sierra eléctrica :D

Gracias.
Chris

jackson666 · #6 (**permalink**) 23/12/2009, 13:42

No entiendo del todo lo que necesitas, pero te explico de que manera modificar el script para que quede a tu gusto

setTimeout(listener, timeOut)

listener-> es la funcion a la que se va a llamar recursivamente
timeOut-> tiempo en milisegundos de espera entre llamado y llamado

la variable x es el valor en '%' del ancho de la barra, si queres que se incremente mas rapido poner por ejemplo x+=2; siqueres mas lento pones x+=0.5; o tambien podes regular el timeOut =)

Si queres que frene o acelere, deberias ademas de variar el largo, variar el timeOut

Espero que se entienda, suerte!

crozer · #7 (**permalink**) 23/12/2009, 15:05

Cita:

Iniciado por jackson666

No entiendo del todo lo que necesitas, pero te explico de que manera modificar el script para que quede a tu gusto

setTimeout(listener, timeOut)

listener-> es la funcion a la que se va a llamar recursivamente
timeOut-> tiempo en milisegundos de espera entre llamado y llamado

la variable x es el valor en '%' del ancho de la barra, si queres que se incremente mas rapido poner por ejemplo x+=2; siqueres mas lento pones x+=0.5; o tambien podes regular el timeOut =)

Si queres que frene o acelere, deberias ademas de variar el largo, variar el timeOut

Espero que se entienda, suerte!

Hola, gracias por todo. Estoy jugando con el x+=0.5 y me gusta el resultado.
Como marqué en la cita, me interesa eso del frenado, no entendí muy bien lo de 'variar' el timeOut.. disculpa mi ignorancia en javascript, pero sinceramente estoy en CERO.

gracias.

EDIT: bueno, puse

Código:

        timer=setTimeout('progress()',-40);

y de alguna manera me gusta el resultado. de todos modos te agradeceria si puedieses explicarme lo del frenado.. si no es nada que quite mucho tiempo y que te complique mucho.

jackson666 · #8 (**permalink**) 23/12/2009, 15:10

jajaja pensa un poco... estas poniendo un tiempo negativo ahi!

Deberias poner una variable en vez de -40 y a esa variable en el mismo ciclo ir restandole un valor... Siempre que sea >0

crozer · #9 (**permalink**) 23/12/2009, 15:32

no, no claro. entiendo que el valor negativo no significa que va a frenarse por -40 ¬¬ ;p
pero me gustó el resultado..

estoy pensando en la formulita que debería dar como resultado un valor cada vez mas pequeño (para crear el efecto de frenado)..
será algo por el estilo? : (estoy asumiendo que en javascript puedo hacer matemática pura, no?)

timer=setTimeout('progress()',y*(y-1);

ese * no lo reconoce, ¿qué vale como multiplicador en JS?
un saludo.
chris

barclow · #10 (**permalink**) 23/12/2009, 15:38

hola,

podrías poner cómo quedó el script al final, al parecer ahora tiene ese efecto de frenado y todo eso.

Saludos

crozer · #11 (**permalink**) 23/12/2009, 15:52

Cita:

Iniciado por barclow

hola,

podrías poner cómo quedó el script al final, al parecer ahora tiene ese efecto de frenado y todo eso.

Saludos

Código:

        <script type="text/javascript">
var x=0;
var y=5;
window.onload=progress();

function progress(){
    var timer;
   
    if(x<100){
        x+=1;
        document.getElementById('progressbar').style.width=x+'%';            
        timer=setTimeout('progress()',y*(y-10);
    }else{
        //clearTimeout(timer);
        //location.href='http://en.chrishonn.com/index.html';
    }
}
</script>

Así está el código. Sin embargo, me marca error en la parte del * entre ambas 'y'.
Hasta que jackson666 o alguien más me pueda responder la pregunta anterior (lo del multiplicador en javascript), el código sin tratar de conseguir el efecto de frenado es asi:

Código:

        <script type="text/javascript">
var x=0;
//var y=5;
window.onload=progress();

function progress(){
    var timer;
   
    if(x<100){
        x+=1;
        document.getElementById('progressbar').style.width=x+'%';            
        timer=setTimeout('progress()',-40);
    }else{
        //clearTimeout(timer);
        //location.href='http://en.chrishonn.com/index.html';
    }
}
</script>

El -40 me da un efecto de aceleración, creo que juega con mi ojo pero me gusta.. (digo que juega con mi ojo porque matemáticamente la barra no debería acelerar)

jackson666 · #12 (**permalink**) 23/12/2009, 16:50

setTimeout('progress()',y*(y-10)) ---> te falto un parentesis de cierre

crozer · #13 (**permalink**) 23/12/2009, 20:55

ahh.. que tonto.
bueno, puse setTimeout('progress()',y*(y-50)) pero no se crea ningún efecto de frenado.
aparentemente la formula no funciona muy bien, o debo implementarla de tal manera que cicle para que se repita una y otra vez y el Timeout sea cada vez más corto..

hm..

jackson666 · #14 (**permalink**) 23/12/2009, 21:04

Con esta funcion lo podes frenar....

Código HTML:

<script type="text/javascript">
var x=0;
var y=15;
window.onload=progress();

function progress(){
    var timer;
   
    if(x<75){
        x++;
        document.getElementById('barra').style.width=x+'%';            
        setTimeout('progress()',y);
    }else if(x<100){
        x++;
        y+=3;
        document.getElementById('barra').style.width=x+'%';            
        timer=setTimeout('progress()',y);
    }else{
        x=0;
        y=15;
        progress();
        //clearTimeout(timer);
        //location.href='tuPagina.htm';
    }
}
</script>

Lo acabo de probar en Firefox y en IE y anda bien en ambos....

crozer · #15 (**permalink**) 24/12/2009, 14:17

te pasaste, muchisisimas gracias ;)
un saludo y feliz navidad.