Me a parecido muy interesante el asunto y se me ocurrio que se puede hacer con dos <div> superpuestos y dos imagenes de fondo para estos. El <div> que esté abajo tendrá color gris de fondo y utilizará como imagen de fondo un rectangulo color verde del mismo tamaño que la barra completa, el <div> que estará encima sólo utulizará una imagen de fondo dividida diagonalmente por la mitad, una mitad será transparente y la otra tendra el mismo color de fondo de la página o del elemento contenedor de la barra. Lo importante es posicionar la image de fondo color verde inicialmente fuera, por debajo de <div> inferior e ir subiendola modificando el atributo backgroundPosition cuando se requiera, dejo un código que realiza el aumento de la barra cada segundo despues de cargarse la página.
Código Javascript
:
Ver original<script>
var contador= 400;
function aumentar()
{
var barra=document.getElementById('abajo');
if(contador<=0)
contador= 400;
else
contador-= 40;
barra.style.backgroundPosition= '0px ' +contador+ 'px';
}
</script>
<style>
#abajo {
width: 150px;
height: 400px;
padding: 0px;
background-color: #999999;
background-image: url('verde.png');
background-repeat: no-repeat;
background-position: 0px 400px;
}
#arriba {
width: 100%;
height: 100%;
padding: 0px;
background-image: url('blanco.gif');
}
</style>
<body onload="setInterval('aumentar()', 1000)">
<div id="abajo">
<div id="arriba"></div>
</div>
</body>
Se puede ver en funcionamiento en esta página:
http://galeon.com/chiforimpula/barra.html
P.D. no estoy seguro si poner esa dirección está permitido, si no es así, agradeceré que alguien edite el mensaje y la elimine.