动画线性渐变以创建加载栏

Question

我想建立一个加载栏，一个有颜色的元素变成一个灰色的长条。

我在 CSS 方面相当糟糕，所以我在动画渐变方面遇到了一些麻烦。我目前的方法是基于这个答案：让一些渐变在 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; }
}

这是结果：

虽然我想要一个更大的红色元素，当它在右边消失时，它会重新出现在左边。

Answer 1

此代码基于@Paulie_D 答案，我使其响应任何大小和更多更改

变得像材料预加载器

.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>