How to write CSS keyframes to indeterminate material design progress bar

Question

I want to make an indeterminate progress bar as in material design (the second one) in CSS3 in a web page. Can anyone share the necessary CSS magic? I want it to behave exactly the same as on the video, so one end is accelerating while the other is slowing down until they switch.

I could not find any existing example that would work this way.

Answer 1

I found a good example on CodePen.

In case the link goes down, here is the code:

body{
  background:#ffffff;
  margin:50px 300px;
}

.slider{
  position:absolute;
  width:1000px;
  height:5px;
  overflow-x: hidden;
}

.line{
  position:absolute;
  opacity: 0.4;
  background:#4a8df8;
  width:150%;
  height:5px;
}

.subline{
  position:absolute;
  background:#4a8df8;
  height:5px; 
}
.inc{
  animation: increase 2s infinite;
}
.dec{
  animation: decrease 2s 0.5s infinite;
}

@keyframes increase {
   from { left: -5%; width: 5%; }
   to { left: 130%; width: 100%;}
}
@keyframes decrease {
   from { left: -80%; width: 80%; }
   to { left: 110%; width: 10%;}
}

<div class="slider">
  <div class="line"></div>
  <div class="subline inc"></div>
  <div class="subline dec"></div>
</div>

Answer 2

For those interested this is how it looks the same CSS code of the accepted answer above but using CSS transforms instead of left/width.

body{
  background:#ffffff;
  margin:50px 300px;
}

.slider{
  position:absolute;
  width:1000px;
  height:5px;
  overflow-x: hidden;
}

.line{
  position:absolute;
  opacity: 0.4;
  background:#4a8df8;
  width:150%;
  height:5px;
}

.subline{
  position:absolute;
  background:#4a8df8;
  width:100%;
  height:5px; 
}
.inc{
  animation: increase 2s infinite;
}
.dec{
  animation: decrease 2s 0.5s infinite;
}

@keyframes increase {
   from {transform:translateX(-5%) scale(.05);}
   to {transform:translateX(130%) scale(1);}
}
@keyframes decrease {
   from {transform:translateX(-80%) scale(.8);}
   to {transform:translateX(110%) scale(.1);}
}