Make some gradient move endlessly in a progress bar like in Windows 7

Question

I wonder if it's possible to make a gradient move inside a div from left to right endlessly using only CSS3 features? There is no need to support all browsers, I just want to experiment. The example is that shiny effect on top of the blue progress bar. An example is appreciated.

Answer 1

Using this CSS you can let a gradient move endlessly (based on the link in Michael's comment):

.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;
    }
}​

Demo: http://jsfiddle.net/jhogervorst/X78qN/2/

This only works in WebKit-based browsers (e.g., Safari and Chrome). To make it work in other browsers as well, see Michael's link and copy some more CSS.

Edit: I had to make it perfect. See the new demo for an almost-perfect Windows progress bar in CSS3 :)