Как сделать круговую диаграмму на чистом CSS?

Question

[Niko Frost]

Хочу сделать такую:

Но проблема в том что, не могу сделать синюю полоску вокруг серой.
Серая - это пустая диаграмма (0%)
Синяя - это уже с данными например (27%, 84% или 47%....)

Update: Прошу прощения, видимо я не правильно сформулировал свой вопрос. Я сделал серую диаграмму, но проблема в том что, теперь хочу классом нанести на нее синюю. Вот в чем проблема. Никак не выходит.
Допустим есть:
<div class="circle">37%</div>
А теперь на нее еще нужно на нести класс, что бы вышло так как на картинке.

Answer 1

[A K]

Если делать как Вы хотите, т.е. выставлять произвольный процент в такую конструкцию
<div class="circle">37%</div>
Как вариант можно сделать с помощью svg

Comments

[Albert Kazan]

Друг. Я ничего не понимаю в SVG. Но можешь сделать тот же круг на 30px?

[A K]

Albert Tatarin: радиус 30px?

[Albert Kazan]

Symphony: Да

[Albert Kazan]

Symphony: Точнее диаметр уже Радиус 15px будет.

[A K]

Albert Tatarin: jsfiddle.net/Symphony/mjza0vnx/40

[Albert Kazan]

Symphony: Спасибо большое)

Answer 2

[littleguga]

Например так

Comments

[Niko Frost]

Благодарю, то что нужно.

[xmoonlight]

Красивенько смотрится в material design: xmoonlight.github.io
Спасибо!

[Albert Kazan]

Этот вариант весьма кривой. В некоторых % линия съезжает в сторону, образуя неправильный круг.

[littleguga]

Albert Tatarin: на каких, например?