Creando una barra de porcentaje con CSS
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?
mola :) . Lo q no he entendido es la manera en que tú introduces el tanto por ciento q llevas leído. o sea,la manera en que lo actualizarías..
joé, últimamente todas estas cosas en forma de “reto” que veo o me proponen, las “traduzco” a flash y pienso…joder, si en flash sería sencillísimo!…no sé qué pensaría si realmente controlase actionScript como es debido xDD. Estaré demasiado “flashcinado”? ;)
Como lo actualizaría? Editando el código y cambiando donde dice:
class=”barra50″
por:
class=”barra70″
y editando el número que sale adentro…
Se podría buscar la forma de que se actualice con un script, pero es tan simple que creo que ni vale la pena…
Y en Flash (sabiendo un poco, claro) no debe ser tan difícil… se me ocurre que se puede tomar el valor del porcentaje de un archivo externo o algo, no?
Lo que yo estoy necesitando es la definicion concreta de barra de porcentaje y contadores.
me parece interesante lo que creaste pero todavia estoy aprendiendo computacion.
Si podes darme esta informacion realmente me seria de mucha ayuda.
Gracias te mando un beso Sil.
Hola, estoy medio desorientada
Donde la aplicaste?, no comprendo para que sirve o como se aplica
gracias
Lo había aplicado en una versión anterior del sitio, programando algo para actualizar el estado en la base de datos de lo que estaba leyendo. Actualizaba desde el backend el porcentaje del libro y la barra cambiaba automáticamente de tamaño tomando ese valor y aplicando el CSS…
Se puede usar para, al tener el estilo creado, mostrar una barra genérica pasando el porcentaje por variables. Para los resultados de una encuesta, o algúna estadística, por ejemplo.
ok muy bueno tu post gracias me sirvio muchisimo