Progressbar create

document.querySelector('input').addEventListener('input',function(){
  var chart = document.querySelector('.pie-chart');      
  chart.style.setProperty('--value',this.value + '%');
})

.pie-chart{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  --value: 30%;

  background: conic-gradient(green var(--value), transparent 0);
  display: flex;
  justify-content: center;
  align-items: center;
}
label,
span{
  display:block
}

.empty {
  
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: #fff;
}

<div class="pie-chart">
  <div class="empty"></div>
</div>

<label>
  <span>Значение (%)</span>
  <input type="number" min="0" max="100" value="30">
</label>