Barra de progreso

En algunas circustancias es necesario indicar al usuario que la página está cargando datos y que debe esperar, normalmente se usa para ello un GIF animado con una ruedas girando, dando la sensación de que está trabajando, otras se pone el reloj de arena llenandose, esto va según gustos. Pero al usuario muchas veces lo que le interesa saber es si el aviso de espera está allí sin más o realmente está haciendo algo, ¿avanza o está colgado?. Por eso las presentaciones iniciales en Flash suelen tener una barra de progreso que indica que se está cargando la animación.
En HTML también se puede hacer, queda muy vistoso y puede ser fundamental para que el usuario o el visitante no se meta en Google y busque otra página.

Mostrar resto >>

<< Ocultar resto
Lo primero que se tiene que hacer es diseñar la barra de progreso, saber como va a actuar y dónde la vamos a usar. He creado un diseño sencillo, en el que aparece un texto, que podría ser modificable y un porcentaje que indica el progreso, debajo está la barra de progreso que se rellena mediante bloques y no de forma progresiva.

    <div class="barra-progreso">         <div id="texto" class="texto-progreso">Cargando datos             ...<br>0%</div>         <div id="pos1" class="vacio"></div>         <div id="pos2" class="vacio"></div>         <div id="pos3" class="vacio"></div>         <div id="pos4" class="vacio"></div>         <div id="pos5" class="vacio"></div>         <div id="pos6" class="vacio"></div>         <div id="pos7" class="vacio"></div>         <div id="pos8" class="vacio"></div>         <div id="pos9" class="vacio"></div>         <div id="pos10" class="vacio"></div>     </div>

Está compuesto por dos partes, la primera es un DIV que contiene el texto y la segunda es un conjunto de DIVs que forma la barra de progreso, estos DIVs tiene estilo a nivel de class y a nivel de id. Mediante el class indicamos el formato, vacio o lleno, los colores, el borde, ... y mediante el id, a parte de poder referenciarlo, indicamos la posición horizontal.

    div.barra-progreso {         width: 300px;         height: 170px;         text-align: left;         border: 1px solid #315C7C;     }     div.texto-progreso {         width: 100%;         font-family: Arial;         font-size: 25px;         height: 70px;         text-align: center;         padding-top: 55px;         padding-bottom: 0px;         margin-top: 5px;         color: #315C7C;         background: url(espera.gif) no-repeat center top;     }     div.vacio {         position: absolute;         width: 20px;         height: 20px;         border: 2px solid #315C7C;         background: #FFF3C9;     }     div.lleno {         position: absolute;         width: 20px;         height: 20px;         border: 2px solid #315C7C;         background: #315C7C;     }     div#pos1 {         margin-left: 17px;     }     div#pos2 {         margin-left: 44px;     }     div#pos3 {         margin-left: 71px;     }     div#pos4 {         margin-left: 98px;     }     div#pos5 {         margin-left: 125px;     }     div#pos6 {         margin-left: 152px;     }     div#pos7 {         margin-left: 179px;     }     div#pos8 {         margin-left: 206px;     }     div#pos9 {         margin-left: 233px;     }     div#pos10 {         margin-left: 260px;     }

Una vez tenemos la barra de progreso, solo tenemos que hacerla funcionar. Se puede hacer de dos formas:

• Cuando el proceso que se ejecuta es mediante Javascript (ej. un cálculo que dure mucho tiempo), se deberá incrementar el porcentaje durante la ejecución de ese proceso, llevando nosotros el control de qué cantidad debemos incrementar.
• Cuando el proceso se ejecuta en el servidor y es costoso en tiempo, para avisar al usuario que se está cargando la página. Para ello es totalmente necesario que el código HTML de la barra de progreso se encuentre al principio del documento HTML, para así poder referenciar a sus objetos antes de que se cargue del todo la página. También se debe devolver código Javascript entre medias de la página que se está generando y que es el que incrementa el progreso, es fundamental que se vacie el flujo de salida para que el efecto de progreso sea el correcto, esto se puede hacer en PHP mediante la función flush o en Java mediante flushBuffer.

El código necesario para incrementar el progreso es el siguiente:

    function progreso(n) {         if (n>0 && n<=100) {             // Calculo en que decena se encuentra             var valor = parseInt(n/10);             if (valor != 0) {                 // Cambio el cuadrado de la decena                 // correspondiente de vacio a lleno                 document.getElementById("pos"+valor).className                     = "lleno";             }             // Cambio el porcentaje             document.getElementById("texto").innerHTML =                 "Cargando datos ...<BR>"+n+"%";         }     }

Un ejemplo del código lo podéis encontrar aquí (funciona en Firefox, IE y Opera para Windows): ARCHIVO ZIP