Анимация линейного градиента для создания загрузочной панели

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

Вам не нужен градиент для этого, просто псевдоэлемент, позиционирование & a преобразование.

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

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