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

Question

[vikas_web]

с скруглениями
возможно два варианта

Answer 1

[Dimka59]

на codepen много вариантов можно найти вот например через svg https://codepen.io/sergiopedercini/pen/jmKdbj

Comments

[vikas_web]

Dimka59, спасибо, а во втором случае еще какая-то белая полоска есть (прижимается к той полоске)
как её можно добавить?

[Dimka59]

белая полоска это border у изображения. border: 2px solid #fff; - например

[vikas_web]

Dimka59, так не костыльно? картинка через абсолют
https://jsfiddle.net/2gz10Ltd/

[Dimka59]

vikas_web, не костыльно, только position: relative; задайте классу single-chart чтоб выровнять круг