Barras de progreso en Bootstrap

En este artículo se detallan las barras de progreso en Bootstrap, se debe tener en cuenta que estas barras utilizan transiciones y animaciones de CSS3 por lo que los efectos no estarán disponibles en Internet Explorer 9 o versiones anteriores, versiones antiguas de Firefox y no estarán disponibles tampoco en Opera 12 por no soportar animaciones de CSS3.

Para crear dicho contenido en la web, se crea un fichero de ejemplo con los elementos que se explicarán a continuación. Como en anteriores artículos, se facilita al final del post un fichero de ejemplos y también se incluye un enlace para probarlos sin necesidad de descargarlos.

 
BARRAS DE PROGRESO SIMPLES:

En el siguiente ejemplo se puede observar una barra de progreso simple, estas barras de progreso son muy utilizadas cuando los usuarios están rellenado encuestas, formularios o en las plataformas de comercio electrónico.

barra_progreso_simple

El código desarrollado para este tipo de barras es simple, se crea un div principal con class=”progress” dentro de este div, se crea otro div con los siguientes elementos:

  • Class: progress-bar (especifica que tipo de barra de progreso se utiliza).
  • Role: progress-bar  (atributos para mejorar su accesibilidad).
  • Aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ (atributos para mejorar su accesibilidad).
  • Style: con un width del 60%; (especifica el tamaño de la barra de progreso).

barra_progreso_simple_codigo

 

BARRAS DE PROGRESO VACIAS:

Es posible que en algunas ocasiones sea interesante crear una barra de progreso vacía, por ejemplo, para cuando un usuario empieza un formulario que debe rellenar. Para ello se muestra en el siguiente ejemplo como realizar una barra de progreso vacía.

barra_progreso_vacia

El código desarrollado es el mismo que las barras simples pero se añadirá en el width: 0%; en aria-valuenow=”0″ y en el span se modificará el texto por 0% completado.

barra_progreso_vacia_codigo2

Atención no se debe caer en la tentación de solo dejar el div con class=”progress” sin indicar ningún elemento, porque si posteriormente se quiere aumentar ese porcentaje con javascript o jquery no se podrá por no tener elementos dentro del div principal.

barra_progreso_vacia_codigo

 

TIPOS DE BARRAS DE PROGRESO:

Bootstrap dispone de varios tipos de estilos para las barras de progreso, en el ejemplo siguiente se observan: las barras por defecto (azul), las barras success (verde), las barras info (turquesa), las barras warning (aviso) y las barras danger (error).

tipos_barras_progreso

En el código desarrollado el único punto que se modifica respecto a las barras simples, es la inclusión de una de las siguientes clases en el div con class=”progress-bar”:

  • Barra de progreso verde: se incluye la class progress-bar-success, normalmente estas barras son utilizadas para indicar que la barra de progreso a tenido éxito.
  • Barra de progreso turquesa: se incluye la class progress-bar-info, normalmente estas barras son utilizadas para indicar que se esta en proceso de completar la información.
  • Barra de progreso amarilla: se incluye la class progress-bar-warning, normalmente estas barras son utilizadas para indicar que hay algún aviso o advertencia en el proceso.
  • Barra de progreso roja: se incluye la class progress-bar-danger, normalmente estas barras son utilizadas para indicar que hay un error o peligro en el proceso.

tipos_barras_progreso_codigo

 

BARRAS DE PROGRESO CEBREADAS:

Las barras de progreso cebreadas son parecidas a las barras de progreso simples con una leve modificación de estilo en su barra de completado, en la siguiente captura se puede apreciar un par de ejemplos:

barras_progreso_cebreadas

Para insertar el cebreado en las barras de progreso se añade la class=”progress-striped”  a la class del div principal de la barra de progreso, por lo que su resultado final es: <div class=”progress progress-striped”>…</div>. A continuación en la siguiente captura se indica el código desarrollado para los ejemplos anteriores:

barras_progreso_cebreadas_codigo

 

BARRAS DE PROGRESO ANIMADAS:

Las barras de progreso animadas se aplican sobre las barras de progreso cebreadas y crean un efecto de movimiento sobre la parte que se va completando. En el siguiente ejemplo se observan dos barras de progreso cebreadas, que llevan aplicadas este estilo (al ser una imagen estática no se puede apreciar):

barras_progreso_animadas

Para incluir animación en las barras cebreadas simplemente se añade la clase active en el div principal de la barra de progreso. En el ejemplo <div class=”progress progress-striped active”>…</div>

barras_progreso_animadas_codigo

 

BARRAS DE PROGRESO SEGMENTADAS:

Las barras de progreso segmentadas son barras compuestas de otras. Normalmente se aplican varios estilos, para que la barra de progreso disponga de diferentes partes. Estas barras son utilizadas para indicar al usuario los formularios que ha ido rellenando. Cada color de la barra indicaría el % completado de cada formulario y sin color el porcentaje de formularios que le quedan por rellenar.

barras_progreso_segmentadas

En la siguiente captura se muestra el código desarrollado para el ejemplo, como se puede apreciar se crea un div superior con class=”progress” y dentro de este div se insertan las diferentes barras de progreso. Automáticamente Bootstrap las ordena en una sola, como se ha podido apreciar en la anterior captura.

barras_progreso_segmentadas_codigo

 

EJEMPLO EN LÍNEA: Creado un enlace para que se pueda probar en la web los ejemplos comentados en el artículo. Para ello simplemente pulsar sobre el siguiente botón y la página se redirige a la web del ejemplo, sin necesidad de tener que descargarlo.

VER EL EJEMPLO EN LÍNEA

Además también se adjunta el fichero comprimido con los ejemplos utilizados en el post, para los que prefieren practicar de manera local en sus pc’s: barras de progreso. En próximos artículos se continuará con los componentes que se pueden utilizar en Bootstrap, como por ejemplo, los encabezados de página, listas de elementos, entre otros elementos.

 

Se recuerdan los artículos relacionados sobre Bootstrap:

 
Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *