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.
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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With