Как делаются такие уровни загрузок?

Question

[Елена]

Уже второй день пошел, как бьюсь это сделать. Мне нужно вот такую загрузку сделать, но вот эти чертовы закругления и линейный градиент все обламывают

Я думала, что сделаю две дуги. И буду просто сдвигать одну и будет получатся типа идет загрузка. Только не выходит ничего. Если серой перекрывать, то не будет закруглений у цветной.

Для тех кто столкнется с похожим: у svg есть stroke-linecap:round для закруглений.

Answer 1

[Антон Шаманов]

эм...а ты уверен что это реализовано именно так? можно ведь использовать svg с фоновым изображением. поддержка множественных градиентных фонов не во всех браузерах реализована

Answer 2

[Floydreme]

Может быть, можно так

Answer 3

[Nikcet]

Можно попробовать keyframe'ы: дрыц тыц