How to animate the progress element with CSS3? - html

Question

I have a progress element like so:
body {
background: grey;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
height: 25px;
width: 95%;
position: relative;
top: 10px;
right: 50%;
left: 2.5%;
}
progress[value]::-webkit-progress-bar {
background-color: rgba(255,255,255,0.2);
border-radius: 50px;
border: solid;
border-width: 0px;
border-color: rgba(255,255,255,0.1);
}
progress[value]::-webkit-progress-value {
background-image: repeating-linear-gradient(
45deg,
#fff,
#fff 10px,
#f9f9f9 10px,
#f9f9f9 20px
);
border-radius: 50px;
-moz-animation-name: move;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-duration: 0.4s;
-moz-animation-delay: 1.5s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: move;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.4s;
animation-delay: 1.5s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 1.5s;
animation-play-state: running;
}
#keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
<progress max="100" value="80"></progress>
And I have used CSS animations, however for some reason they do not work. I want the stripes to move horizontally, infinitely. Is there any reason to why this doesn't work?

Answer 1

Note - <progress> is not well supported by IE. See this for a complete guide to make it work across browsers. Below demo is the simplified animation without <progress> element.
body {
background-color: #666;
}
div {
background-color: #999;
border-radius: 30px;
height: 30px;
}
div > div {
background-image: repeating-linear-gradient(-45deg, #fff, #fff 10px, #ccc 10px, #ccc 20px);
background-size: 28px 30px;
animation: progress 2s linear infinite;
width: 50%;
}
#keyframes progress {
0% { background-position: 0 0; }
100% { background-position: 28px 0; }
}
<div><div></div></div>