JavaScript - Gradiente que sube y baja en función de un valor

Hola a todos,

Quiero realizar con javascript lo siguiente:

Tengo un valor que va cambiando, en una escala de 0-100. Quiero representar ese valor con una barra de gradiente, la barra sera más larga cuanto mas se acerque a 100, hasta llegar al tamaño establecido. Me da igual como implementarlo, lo quiero hacer de la forma más sencilla posible. La idea creo que es usar dos imagenes que representen la barra de gradiente (una barra blanca y la otra con los colores del gradiente). La barra gradiente se va superponiendo a la blanca cuanto mayor sea mi valor. Pero no tengo claro como implementarlo.

¿Como lo veis? ¿Alguna sugerencia?

Gracias y un saludo

Hola Miguel:

Para hacer lo que quieres tienes la propiedad de CSS clip:rect()

Su implementación en javascript la define muy bien http://www.w3schools.com/jsref/prop_style_clip.asp

Yo lo tengo implementado mediante dos <div>. El primero me define la posición relativa donde lo quiero ubicar y el segundo, necesariamente, ha de ser absoluta para que corte la imagen donde quieres.


Personalmente me olvidaría de la imagen en blanco (podrías darle un fondo blanco simplemente pero no lo he probado) y trabajo con la imagen en color. y la propiedad clip:rect()

La complejidad mayor la vas a tener en pasar de forma variable los valores internos de la propiedad.

El resultado (en horizontal) puede ser algo parecido a la imagen que adjunto (se trata de ver la carga de vehículos según envíos y los valores están recogidos desde suma de campos en la base de datos: lo más complejo es, como dije, recoger los datos y hacerlos porcentuales y variables):

Hola Jose Maria,
lo primero, gracias por tu respuesta.

Los valores los recibo ya en porcentajes de forma correcta. Solo tengo que representar el porcentaje con la barra.

No entiendo muy bien esa solución. Supongamos que tengo que representar un valor del 60%. ¿Como lo represento? Hay que tener en cuenta que ese valor no es estático, lo capturo de una base de datos y se refresca cada cierto tiempo.

Sólo con CSS, como tu propones, me parece que no se puede hacer. Hay que recurrir a JavaScript.

Un saludo

Tienes que tener en cuenta el tamaño de tu imagen en píxeles y pasar esos valores dentro de clip:rect([arriba]px,[derecha]px,[abajo]px,[izquierda]px)

Generalmente dos valores irán a 0px.

En mi caso (el de la imagen) en horizontal, la imagen total (para el 100%) tiene 15 px de alto y 200px de ancho:


Creo que se entiende que la variable en PHP la multiplico por 2 porque el valor 100 tendrá 200px. Si estoy indicando un 60% la imagen se mostrará desde la posición 0 a la izquierda y cortada a los 120px de su ancho.

Quería ampliar mi contestación anterior. Me decías:
Sólo con CSS, como tu propones, me parece que no se puede hacer. Hay que recurrir a JavaScript.

No soy amigo de librerías para una sola imagen. Seguro que existen. Pero personalmente evito la jQuerydependencia y otras fórmulas que cargan peso innecesario a las páginas.

Si te fijas en el enlace de mi primera intervención (w3schools.com y su área de pruebas) lo que javascript hace no es sino configurar el estilo

La inserción de tu variable "cambiante" será mediante el mismo procedimiento (claro que en javascript) pero si la recibes desde PHP/MySQL tendrías que hacer un <input type=hidden> para recoger la variable, y mi comentario anterior es más simple.

Nos cuentas.