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