title: Animating linear-gradient to create a loading bar
body: <p>I want to build a loading bar, with one coloured element going a long a grey bar.</p>
  
  <p>I am fairly bad at CSS, so I have some trouble with animating gradients. 
  My current approach is based on this answer: <a href="https://stackoverflow.com/questions/10305596/make-some-gradient-move-endlessly-in-a-progress-bar-like-in-windows-7">Make some gradient move endlessly in a progress bar like in Windows 7</a></p>
  
  <pre><code>foo {
    background-color: $cGray300;
    height: 10px;
    background: linear-gradient(to right,  $cGray300 0%, $cGray300 30%, #fed0d0 30%, #fed0d0 40%, $cGray300 40%, $cGray300 100%) repeat;
    background-size: 50% 100%;
    animation-name: moving-gradient;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  @-webkit-keyframes moving-gradient {
    0% { background-position: left bottom; }
    100% { background-position: right bottom; }
  }
  </code></pre>
  
  <p>This is the result:
  <a href="https://i.stack.imgur.com/Qlp0Z.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qlp0Z.gif" alt="current progress"></a></p>
  
  <p>Though I want one, red bigger element that reappears on the left when it disappears on the right. </p>