Как сделать анимированный градиент?

Question

[Gagatyn]

Как сделать такую анимацию, похожую на загрузку? Типа скошенных линий на -45deg = 135deg и плавно "передвигающихся", бесконечно.

Почему у меня он дергается и как сделать чтобы он не дергался, и шел плавно бесконечно?
https://jsfiddle.net/grizz/phufb8yc/1/

Answer 1

[IvanArtemenko]

Сделай before и after им дай skew и заанимируй их :)
можно еще бутстрапом https://jsfiddle.net/vt43vpav/1/

Comments

[Gagatyn]

IvanArtemenko этот вариант не рассматривал

Answer 2

[Денис Инешин]

https://jsfiddle.net/IonDen/phufb8yc/6/

1. У вас текстура корявая, нужно сделать плавно переходящую
2. Нельзя делать позиционирование фона в процентах здесь. Это работает по другому. 50% - значит центр, 100% значит правый край, а не то что вы могли подумать.

Comments

[Gagatyn]

Денис Инешин как же все просто) спасибо

[Gagatyn]

Денис Инешин а не могли бы подсказать не с картинками, а с linear-gradient? Я его сделал, но чтоб он плавно "загружался" не знаю как или все так же в bg-position указать -(ширину контейнера)?

[Денис Инешин]

Gagatyn: я бы не усложнял, preloaders.net/en/free сделайте заранее анимированную гифку и пользуйтесь. Никаких томозов, идеальная кроссбраузерность)