Как верстать такой прогресс бар?

Question

[AndWEB]

И анимировать его, смотрел на Codepen.io, вроде понятно но как сделать градиентом саму полоску прогресс бара?

Answer 1

[Владимир Проскурин]

В defs определяете градиент https://developer.mozilla.org/ru/docs/Web/SVG/%D0%... и в stroke круга вместо цвета пишите
stroke: url(#название-градиента)
вот к вашему примеру
https://codepen.io/anon/pen/gBRRXX?editors=1010

Comments

[AndWEB]

Большое спасибо!

Answer 2

[Олег]

Go ссылку на то, что реализовано

Comments

[AndWEB]

Нашел вот такой проект на Codepen.io https://codepen.io/be-key/pen/pJKJeG