Redimensionar imagen con CSS y un DIV

[guif]

Hola!

Estoy intentando hacer una barra de progreso con efecto de movimiento desde la posicion 0 a la esperada. Tengo el siguiente CSS:

Código:

.progress-level {
background: url(progress.png) no-repeat left center;
height: 39px;
}

Como puedo hacer para que empieza entonces con width a 0 y se aumente hasta mi valor esperado?
Es decir, que el usuario final pueda ver ese efecto de crecimiento.
Puedo controlar también la velocidad de este?

Para imprimir la imagen lo hago así:

Código:

<div class="progress-level" style="width: 35%;">

Gracias!

[chicho_]

Por JavaScript puedes hacer que cada X tiempo modifique el atributo width de ese elemento, haciendo el efecto que deseas.

Pero dependiendo de para que lo quieras, quizás te es más práctico crear un GIF animado y mostrarlo directamente.

[kseso?]

Mire esto.
Quizás le sirva como orientación.
Si desea prescindir del gif para hacerlo con css, puede mirar el uso de las propiedades relativas a "transform", "transition" y demás. Todas relativas a css3.

[guif]

lo del gif evidentemente no lo quiero realizar... CSS3 me limitaria quiza muchos navegadores.
Como podria implementar mi trozo de codigo con javascript?

[guif]

Me he mirado la pagina que me habeis comentado, pero no lo acabo de ver.
Si en un DIV quiero que me aparezca primero el preloader y luego la imagen como lo hago?
Como hago para cargar al final del CSS la imagen?