Как сделать такой элемент в верстке?

Question

Как сделать такой элемент статичным.
Но в будущем, чтобы через стили я мог менять длину у синей полоски. К примеру, когда будет 20 мест, я мог бы поставить 50% длины и синяя полоска заполняла лишь половину длины окружности.

Answer 1

Ну вообще есть спец плагины типа Chart.js но на css можно так сделать

.item{
  width:150px;
  height:150px;
  text-align:center;
  line-height:150px;
  position: relative;
  border-radius:50%;
}
.item span{
  position: relative;
  font-size:1.4em;
  font-weight:900;
  font-family:sans-serif;
  position: relative;
  z-index:100;
}
.item:before{
  content:"";
  width:100%;
  height:100%;
  background:conic-gradient(transparent 10%, lightblue 11%);
  position: absolute;
  top:0;
  left:0;
  border-radius:50%;
}
.item:after{
  content:"";
  display:block;
  width:140px;
  height:140px;
  background:#fff;
  position: absolute;
  top:5px;
  left:5px;
  border-radius:50%;
}

<div class="item">
  <span>20</span>
</div>