Create Google like activity/progress bars with CSS3 animations - css

Question

I've found this video from the Google style guide
http://material-design.storage.googleapis.com/videos/components-progressandactivity-progressandactivity-_20spec.linear_large_xhdpi.mp4
at this page
http://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators
I like the way the progress is shown. Does anybody know, if there is an implementation with CSS3 around? I tried it myself, but this is the closest I've come so far for the second progress bar:
http://plnkr.co/edit/v4jcJlpusKqEK3AySOBZ?p=preview
<div class="spinner">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
</div>
And here is the CSS as SCSS:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#-ms-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
#mixin animation($animation) {
-webkit-animation: #{$animation};
-moz-animation: #{$animation};
-ms-animation: #{$animation};
animation: #{$animation};
}
$spinner-height: 7px;
$green: #8bc34a;
.spinner {
position: relative;
width: 100%;
height: $spinner-height;
opacity: 1;
background-color: lighten($green, 25%);
overflow: hidden;
.bar {
height: $spinner-height;
background-color: $green;
position: absolute;
}
.bar1 {
left: 50%;
width: 10%;
#include animation(bar1 7s infinite linear);
}
.bar2 {
left: 0%;
width: 0%;
#include animation(bar2 7s infinite);
}
}
#include keyframes(bar1) {
0% { width: 0%; left: 0%; }
10% { width: 30%; left: 100%; }
19.99% { width: 30%; left: 100%; }
20% { width: 0%; left: 0%; }
30% { width: 80%; left: 100%; }
30.01% { width: 0%; left: 0%; }
40% { width: 5%; left: 30%; }
50% { width: 50%; left: 100%; }
50.01% { width: 0%; left: 0%; }
60% { width: 60%; left: 20%; }
70% { width: 5%; left: 100%; }
70.01% { width: 0%; left: 0%; }
80% { width: 50%; left: 30%; }
90% { width: 10%; left: 80%; }
100% { width: 20%; left: 100%; }
}
#include keyframes(bar2) {
0% { width: 0%; left: 0%; }
10% { width: 60%; }
19.99% { width: 40%; left: 100%; }
20% { width: 0%; left: 0%; }
25% { width: 10%; left: 10%; }
30% { width: 40%; left: 30%; }
40% { width: 60%; left: 100%; }
40.01% { width: 0%; left: 0%; }
50% { width: 10%; left: 40%; }
60% { width: 30%; left: 100%; }
60.01% { width: 0%; left: 0%; }
70% { width: 10%; left: 40%; }
80% { width: 5%; left: 100%; }
80.01% { width: 0%; left: 0%; }
90% { width: 70%; left: 10%; }
100% { width: 10%; left: 100%; }
}
Maybe someone can help me to come closer to this animation.

Answer 1

With one div class .loading, here's a possible answer to the second one (you'll need to prefix the animations / transitions)
.loading{
width:90%;
margin:0 auto;
height:8px;
background-color:lightblue;
position:relative;
transition: all 300ms ease-in-out;
}
.loading:hover{
height:20px;
}
.loading:before, .loading:after{
content:"";
display:block;
height:100%;
position:absolute;
background-color:blue;
animation:motion 2s infinite ease;
border-radius:3px;
}
.loading:after{
animation-delay:600ms;
}
#keyframes motion{
0% {left:0; width:0;}
20% {left:20%; width:60%;}
40% {left:30%; width:20%;}
60% {left:60%; width:10%;}
80% {left:70%; width:30%;}
100% {left:100%; width:0;}
}
I added the height transition on hover (which is probably what would occur on an event listener instead starting at height:0;).