Progress Bar con Mootools
Las barras de progreso han sido muy útiles desde que los sistemas de cómputo existen, o por lo menos desde que yo recuerdo que me inicié en este mundo del desarrollo de software mas o menos hace unos 15 años (ouch!!). Sirven básicamente para indicarle al usuario cuanto falta para que cargue lo que desea accesar. Bueno, pues ahora explicaré cómo hacer de manera sencilla una barra de progreso con el siempre fiel Mootools.
Comenzaremos escribiendo el html. Tan sólo se requiere de un contenedor para la barra, y un botón que activará la barra de progreso. Quedaría de la siguiente forma:
HTML |___________________
<div id=”divProgressBar”> </div>
barra de progreso
<button id=”btnBegin”>Iniciar</button>
Sería todo el html necesario para nuestra barra de progreso. Ahora, lo divertido… el javascript, o el mootools, ya no recuerdo muy bien cómo se llama 
JAVASCRIPT|______________
- Primero, definiriamos la clase
var progressBar = new Class({
initialize: function(){
}
});
- Luego initialize:
initialize: function(id,opt){
this.id = $(id); //El objeto que fungirá como barra de progreso
this.options=new $H({ //Hacemos un objeto ‘options’, con las características que la barra tendrá por default
width:100, //ancho de la barra de progreso
background: ‘#eee’, //color de fondo de la barra de progreso
border:’1px solid #999′, //borde de la barra de progreso
barBackground:’#0f0′, //color de fondo de la barra de progreso
barInc:1 //incremento de avance en la barra
});
this.options.extend(opt); //extendemos las opciones, si es que le enviamos al crear la instancia de la clase
this.options=this.options.obj; //le pasamos el objeto generado a la variable options
this.setBeauty(); //método que utilizaremos para crear y estilizar la barra
this.go(0); //método encargado de la magia
}
- una maquilladita, setBeauty
setBeauty: function(){
this.divBar=new Element(’div’,{ // creamos la barra que mostrará el progreso
’styles’:{ //la maquillamos
width:0,
top:0
background:this.options.barBackground,
position:’absolute’,
}
}).setHTML(’ ‘);
this.id.adopt(this.divBar); // La insertamos en el contenedor
this.id.setStyles({ // Maquillamos el contenedor
width: this.options.width,
background: this.options.background,
border: this.options.border,
position:’relative’
});
}
- La magia, go()
go: function(w){
this.divBar.setStyle(’width’,w); // ajustamos el ancho del div que muestra el progreso
if(w<this.options.width)
this.go.pass(w+this.options.barInc,this).delay(10); // si aún no se completa, seguimos llamando al método go. Aquí utilizo delay para fines demostrativos.
else
this.divBar.setHTML(’Listo!!!’); // Acción a ejecutar tras completar la barra
}
- Instancear la clase, y crear el evento para llamarla
Site={
start:function(){
$(’btnBegin’).addEvent(’click’,function(){ // se añade evento click al botón que iniciará el progreso
new progressBar(’divProgressBar’,{width:200, barBackground:’#00f’, barInc:5}); //se hace instancia a la clase, pasandole como argumentos el id del div contenedor, y las opciones
});
}
}
window.addEvent(”domready”, Site.start); // una vez listo el DOM, llamamos la función que prepara el evento del botón
- Listo, ahora veamos cómo funciona:
new progressBar(’divProgressBar’); //Default
new progressBar(’divProgressBar1′,{width:400, barBackground:’#7394B8′, barInc:10, border:’2px outset #23405F’});
new progressBar(’divProgressBar2′,{width:200, barBackground:’#ccc url(http://techniq.softr.net/assets/bgProgressBar.png) repeat-x’, barInc:5}); // con una imagen de fondo
- Código completo:
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>SOFTr ProgressBar</title>
<script type=”text/javascript” src=”mootools11.js”></script>
<script type=”text/javascript”>
var progressBar = new Class({
initialize: function(id,opt){
this.id = $(id);
this.options=new $H({
width:100,
background: ‘#eee’,
border:’1px solid #999′,
barBackground:’#0f0′,
barInc:1
});
this.options.extend(opt);
this.options=this.options.obj;
this.setBeauty();
this.go(0);
},
setBeauty: function(){
this.divBar=new Element(’div’,{
’styles’:{
width:0,
background:this.options.barBackground,
position:’absolute’,
top:0
}
}).setHTML(’ ‘)
this.id.adopt(this.divBar);
this.id.setStyles({
width: this.options.width,
background: this.options.background,
border: this.options.border,
position:’relative’
});
},
go: function(w){
this.divBar.setStyle(’width’,w);
if(w<this.options.width)
this.go.pass(w+this.options.barInc,this).delay(10);
else
this.divBar.setHTML(’Listo!!!’);
}
});
Site={
start:function(){
$(’btnBegin’).addEvent(’click’,function(){
new progressBar(’divProgressBar’);
});
$(’btnBegin1′).addEvent(’click’,function(){
new progressBar(’divProgressBar1′,{width:400, barBackground:’#7394B8′, barInc:10, border:’2px outset #23405F’});
});
$(’btnBegin2′).addEvent(’click’,function(){
new progressBar(’divProgressBar2′,{width:200, barBackground:’#ccc url(http://techniq.softr.net/assets/bgProgressBar.png) repeat-x’, barInc:5});
});
}
}
window.addEvent(”domready”, Site.start);
</script>
</head>
<body>
<div id=”divProgressBar”> </div>
barra de progreso
<button id=”btnBegin”>Iniciar</button>
</body>
Luis mogollon said,
Wrote on June 19, 2008 @ 2:52 am
HOla!. el boton que activa esta barra de progreso tambien podria ser un submit?, veran tengo un formulario que aveces dependiendo lo que la gente adjunta demora en cargar y pensaba usar esto.. pero no se si puede.
Daniel Niquet said,
Wrote on June 19, 2008 @ 2:33 pm
Hola, si es posible…. Siempre y cuando sepamos el status de la subida del archivo. No lo he manejado, pero hay una forma en php, para saber cuántos bytes de los totales se han subido hasta un momento, entonces ese es el dato de avance que le pasaría al progress bar. Si se te complica esta parte, basta con una imagen de precarga para que la gente sepa que aún se está cargando y no se desesperen. Acá Andrés Nieto tiene unas cuantas. http://www.anieto2k.com/2006/03/01/coleccion-de-imagenes-para-loading/
Martin said,
Wrote on June 21, 2008 @ 10:17 pm
Hola, estoy intentando mostrar una barra de progreso al subir archivos utilizando el componente “file” dentro de un formulario enctype=”multipart/form-data”. He intentado de muchas formas pero no logro hacer que el progreso de la barra refleje el tamaño real del archivo que se esta subiendo. Desde ya te agradezco si puedes ayudarme con esto.