Animating linear-gradient to create a loading bar

Question

I want to build a loading bar, with one coloured element going a long a grey bar.

I am fairly bad at CSS, so I have some trouble with animating gradients. My current approach is based on this answer: Make some gradient move endlessly in a progress bar like in Windows 7

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; }
}

This is the result:

Though I want one, red bigger element that reappears on the left when it disappears on the right.

Answer 1

This Code is Based on @Paulie_D answer and i make it responsive for any sizes and little more changes

to become like material preloader

.state-changed{
position:relative;
width:400px;
height:20px;
border:1px solid silver;
}

.state-changed::after {
        content: '';
        position: absolute;
        height: 2px; 
        background: red;
        animation: progress 1.5s infinite ease-in-out ;
    }
    
    @keyframes progress {
    0% {
        left: 0;
        width: 0;
    }
    50% {
        width: 100%;
    }
    100% {
        right: 0;
        width: 0;
    }
}

<div class="state-changed"></div>

Answer 2

You don't need a gradient for this, just a pseudo-element, positioning & a transform.

.bar {
  width: 50%;
  height: 10px;
  background: lightgrey;
  margin: 2em auto;
  position: relative;
  overflow: hidden;
}
.bar::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 30%;
  background: red;
  animation: progress 2s infinite linear;
}
@-webkit-keyframes progress {
  0% {
    left: 0;
    transform: translateX(-100%);
  }
  100% {
    left: 100%;
    transform: translateX(0%);
  }
}

<div class="bar"></div>