Manuel Oviedo 26 de noviembre de 2013 a las 06.10
   Imprimir artículo
elWebmaster.com

HTML5: C贸mo crear una barra de progreso nativa y darle estilo


html5logowideEl elemento progress fue introducido al mundo web por el HTML5, este elemento nos permite mostrar el progreso de ciertas tareas, como descargas o actualizaciones, b谩sicamente cualquier cosa que tenga un progreso. En este art铆culo, te mostraremos c贸mo agregar este elemento al documento, c贸mo dar estilo con CSS y animar la barra progress.

Uso b谩sico

La barra de progreso puede ser agregada al documento con esta etiqueta. El valor del progreso es determinado con los atributos VALUE, MIN y MAX.

  1. <progress value="10" max="100"></progress>

Desde que la barra de progreso se volvi贸 nativa, la presentaci贸n vari贸 dependiendo de la plataforma.

Ahora, tratemos de darle estilo a la barra de progreso, para as铆 darle una vista consistente o similar a trav茅s de cualquier plataforma.

Dar estilo a la barra

En el stylesheet, nosotros podemos usar el elemento selector para ubicar y agregar una regla de estilos a este elemento. En este ejemplo, cambiamos el color de fondo, quitamos las l铆neas de borde y la redondeamos agreg谩ndole un radio al borde con la mitad de su altura.

  1. progress {  
  2.     background-color: #f3f3f3;  
  3.     border: 0;  
  4.     height: 18px;  
  5.     border-radius: 9px;  
  6. }

Como sea, cada browser maneja esto un poco diferente.

En Firefox, el estilo afecta la barra de progreso, mientras el medidor de progreso y su valor no es afectado.

En Chrome y Safari, ser谩 removido el estilo y presentaci贸n nativa y la reemplaza con el estilo de Webkit, los estilos anteriores no se aplicar谩n (al menos por el momento).

Por lo tanto, necesitamos un poco m谩s de soluci贸n en estos casos.

En Chrome y Safari, el elemento progress es traducido de esta manera.

  1. <progress>  
  2.     <div> ::-webkit-progress-bar  
  3.         <div>::-webkit-progress-value

Por lo tanto, para cambiar la barra de progreso y los valores de los estilos del progreso en estos navegadores, tenemos que a帽adir los Webkit pseudo-clases.

  1. progress::-webkit-progress-bar {  
  2.     /* style rules */  
  3. }  
  4. progress::-webkit-progress-value {  
  5.     /* style rules */  
  6. }

Firefox tambi茅n tiene su pseudo-clase especial ::-moz-progress-bar. A diferencia de Chrome y Safari, esta pseudo-clase en Firefox se refiere al valor del medidor del progreso.

  1. progress::-moz-progress-bar {  
  2.     /* style rules */  
  3. }

En conclusi贸n, esos son actualmente todos los selectores para dar estilos a la barra de progreso de HTML5.

  1. progress {  
  2.     /* style rules */  
  3. }  
  4. progress::-webkit-progress-bar {  
  5.     /* style rules */  
  6. }  
  7. progress::-webkit-progress-value {  
  8.     /* style rules */  
  9. }  
  10. progress::-moz-progress-bar {  
  11.     /* style rules */  
  12. }

Animar el progreso

A continuaci贸n veremos como animar la barra de progreso. T铆picamente, la barra de progreso se expande desde la izquierda hasta la derecha seg煤n la tarea vaya progresando.

Esta es la idea, la barra de progreso se expandir谩 desde 0 y se detendr谩 una vez que llegue al m谩ximo valor. Nosotros adem谩s mostraremos el valor num茅rico seg煤n vaya progresando. Abajo la estructura HTML.

  1. <progress id="progressbar" value="0" max="100"></progress>

En cuanto al CSS, en este ejemplo, usaremos jQuery para animar la barra de progreso. No se olviden de insertar la llamada a la librer铆a de jQuery como se hace a continuaci贸n.

  1. <script src="js/jquery.js" type="text/javascript"></script>

Entonces, agregamos el script para que la barra de progreso se expanda. Primero, almacenamos el elemento de la barra de progreso, el valor del progreso as铆 como su m谩ximo valor y su tiempo, en variables.

  1. var progressbar = $('#progressbar'),  
  2.     max = progressbar.attr('max'),  
  3.     value = progressbar.val(),  
  4.     time = (1000/max)*5;

A continuaci贸n, creamos una variable que almacenan la funci贸n de animaci贸n. En este ejemplo, llamamos a la variable de carga.

  1. var loading = function() {
  2.  
  3. }

Dentro de la funci贸n anterior, se establece el intervalo de progreso. Vamos a aumentar el valor de uno por per铆odo de tiempo – se puede aumentar el valor para hacer funcionar el progreso m谩s r谩pido.

  1. value += 1;

Y entonces, le sumamos el resultado a la barra de progreso.

  1. addValue = progressbar.val(value);

Tambi茅n se muestra el valor en el interior, al lado de la barra de progreso.

  1. $('.progress-value').html(value + '%');

A continuaci贸n, creamos una nueva funci贸n para correr la funci贸n de animaci贸n.

  1. setInterval(function() {  
  2.     loading();  
  3. }, time);

En este punto, la animaci贸n ya est谩 funcionando. Sin embargo, el valor seguir谩 aumentando hasta el infinito. Por lo tanto, tenemos que crear una sentencia condicional para que la animaci贸n se detenga cuando alcance su valor m谩ximo.

En primer lugar, vamos a guardar la funci贸n anterior en una variable como tal.

  1. var animate = setInterval(function() {  
  2.     loading();  
  3. }, time);

Y ahora, dentro de la variable de carga, agregaremos la declaraci贸n del condicional de la siguiente manera.

  1. if (value == max) {  
  2.     clearInterval(animate);  
  3. }

Los script de estados anteriores que una vez que su valor sea igual al m谩ximo, desactiva el intervalo, que detendr谩 la funci贸n de animaci贸n.

Eso es y hasta aqu铆 est谩 todo el c贸digo para animar la barra de progreso.

  1. $(document).ready(function() {  
  2.     var progressbar = $('#progressbar'),  
  3.         max = progressbar.attr('max'),  
  4.         time = (1000/max)*5,      
  5.         value = progressbar.val();  
  6.  
  7.     var loading = function() {  
  8.         value += 1;  
  9.         addValue = progressbar.val(value);  
  10.          
  11.         $('.progress-value').html(value + '%');  
  12.  
  13.         if (value == max) {  
  14.             clearInterval(animate);                      
  15.         }  
  16.     };  
  17.  
  18.     var animate = setInterval(function() {  
  19.         loading();  
  20.     }, time);  
  21. };

Puedes descargar el c贸digo fuente haciendo clic en este enlace >>

Fuente original del art铆culo: Hongkiat.com
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Paola Prada dice:

    Muchas gracias por tu codigo, excelente y facil.

  2. JORGE dice:

    OYE EXCELENTE APORTE
    TENGO UNA DUDA SI DESEO QUE NO SE REINICIE CADA VEZ QUE REFRESQUE(F5)
    SINO QUE VALLA CARGANDO HASTA QUE LLEGUE AL 1005 SIN IMPORTAR QUE SE CIERRE
    MEJOR DICHO Q CUANDO LA ABR脕 ALLA AVANZADO EL TIEMPO

  3. jimmy dice:

    Ok

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder