Question

我想建一个加载栏，一个彩色元素长一个灰色条。

我对CSS相当不好，所以我在制作渐变动画时遇到了一些麻烦。我目前的方法基于这个答案：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; }
}

这是结果：

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

Answer 1

你不需要为此提供渐变，只需要一个伪元素，定位和放大。变换。

＆＃13;

.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%);
  }
}

＆＃13;

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

＆＃13;

Answer 2

这是一个有效的pen

仅使用CSS：

HTML：

<div class="loader8"></div>

CSS：

@-webkit-keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}
@-moz-keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}
@-o-keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}
@keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}

.loader8 {
    width:250px;
    height:16px;
    border:1px solid #bbb;
    border-radius:0px;
    position:relative;
    overflow:hidden;
    background: #E6E6E6;
    margin:5px;
}

.loader8:after {
    content: " ";
    display:block;
    width:120px;
    top:-50%;
    height:250%;
    position:absolute;
    animation: greenglow 3s linear infinite;
    -webkit-animation: greenglow 3s linear infinite;
    z-index:2;
    background: #1CAE30;
}

Answer 3

此代码基于@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>

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

3 个答案: