Как сделать круг с текстом внутри и заполнение его границ в процентной пропорции?

Question

[maksam07]

Имеется такой вот круг:
<div class="lvl">0</div>

.lvl {
	float: right;
	height: 45px;
	width: 45px;
	line-height: 45px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	border-radius: 50%;
	border: 2px solid #637074;
	font-weight: 700;
	font-size: 18px;
	color: #637074;
}

Можете подсказать как переделать его, что б границы заполнялись к примеру зеленым цветом и задавалось в блоке это как style=" ...: 100%;"? (или в градусах, что более вероятно ) Анимация заполнения вовсе не важна, главное что б было видно на сколько заполнен круг
Спасибо.

Answer 1

[Дима Паутов]

https://jsfiddle.net/ygf4vgy3/

Comments

[maksam07]

Я нашел один нужный круг, и задается в процентах, только вот на 100% оно показывает заполнение на 0, можешь глянуть?
Вот мой набросок: https://jsbin.com/xuhuci/edit

[maksam07]

я там немного все испортил и не знаю как исправить :D

Answer 2

[Bastax13]

Думаю, вам пригодится
нажми на меня