Haz que un gradiente se mueva interminablemente en una barra de progreso como en Windows 7

Question

Me pregunto si es posible hacer un movimiento de degradado dentro de un div de izquierda a derecha sin fin usando solo las características de CSS3. No es necesario admitir todos los navegadores, solo quiero experimentar. El ejemplo es ese efecto brillante en la parte superior de la barra de progreso azul. Un ejemplo es apreciado.

Answer 1

El uso de este CSS puede dejar que un movimiento de gradiente sin fin (basado en el link en el comentario de Michael):

.bar { 
    background: -webkit-linear-gradient(left , #0193CD 30%, #66D4E5 80%, #0193CD 100%) repeat; 
    -webkit-background-size: 50% 100%; 
    -webkit-animation-name: moving-gradient; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 

@-webkit-keyframes moving-gradient { 
    0% { 
     background-position: left bottom; 
    } 

    100% { 
     background-position: right bottom; 
    } 
}​ 

Demostración:http://jsfiddle.net/jhogervorst/X78qN/2/

Esto sólo funciona en WebKit navegadores basados ​​en la red (p. ej., Safari y Chrome). Para que funcione también en otros navegadores, consulte Michael's link y copie un poco más de CSS.

Editar: Tuve que hacerlo perfecto. Vea la nueva demostración de una barra de progreso de Windows casi perfecta en CSS3 :)