Creando una barra de porcentaje con CSS // LDAblog

Estaba pensando en agregar una huevada donde poner lo que estoy leyendo actualmente, y paseándome por internet vi algo similar, que usaba una barra de porcentaje hecha en CSS para mostrar el progreso de lectura, algo que me pareció bastante curioso como para experimentar, y ya que estoy voy a contar como se hace…

Le ponemos un nombre y la subimos en una carpeta dentro de nuestro servidor, en este caso es “progreso.gif” y está en la carpeta “img”.

El segundo paso es crear el CSS necesario para definir el aspecto de la barra, que en mi caso es este:

.barra0, .barra10, .barra20, .barra30, .barra40, .barra50, .barra60, .barra70, .barra80, .barra90, .barra100 {
 width: 150px;
 border: 1px solid #999;
 text-align: center;
 background:#fff url(/img/progreso.gif) repeat-y;
}

En este caso usé 11 classes diferentes (0, 10, 20, 30…), una cada 10% (incluyendo el 0%), pero de la misma forma se pueden hacer las que se quieran.

Qué es lo que hace ese código: Simplemente especifiqué el ancho de la imágen, ya que por defecto el DIV va a ocupar el 100% y no quiero que el fondo sea más ancho que la imágen; agregué un borde de 1px alrededor de la imágen y especifiqué que el texto dentro del tag esté alineado en el centro. En cuanto al fondo: especificamos un color para el fondo (en mi caso blanco, #fff) y el url de la imágen. En este caso también especifiqué que la imágen se repita verticalmente (repeat-y) por si el texto que pongo adentro es más alto que la imágen de base.

Ahora viene la parte “importante”: vamos a definir una posición diferente para la imágen en cada uno de los classes. Usando el tag “background-position” vamos a ir restándole un 10% a la imágen cada vez en el eje x, lo que en este caso va a hacer que veamos 15px menos de esa imágen, y el resto lo complete el color del fondo. En el caso del 0% simplemente especificamos que no haya ninguna imágen de fondo. El código es el siguiente:

.barra0 {background-image:none;}
.barra10 {background-position:-135px 0;}
.barra20 {background-position:-120px 0;}
.barra30 {background-position:-105px 0;}
.barra40 {background-position:-90px 0;}
.barra50 {background-position:-75px 0;}
.barra60 {background-position:-60px 0;}
.barra70 {background-position:-45px 0;}
.barra80 {background-position:-30px 0;}
.barra90 {background-position:-15px 0;}
.barra100 {background-position:0 0;}

Lo único que queda ahora es probarlo en nuestra página, usando un código como este:

<div class="barra50">50%</div>

¿Qué tal?