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

.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>