JSFiddle - React, Tailwind, and code Playground

by VixedS

HTML

<input />
<div class="spinner">
  <div class="spinner-inner"></div>
</div>

CSS

.spinner{
  position:relative;
  width:200px;
  height:200px;
  background:red;
  border-radius:50%;
  overflow:hidden;
  margin:30px auto;
}
.spinner-inner{
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 100px;
    border-color: transparent;
    border-top-color: #000;
    transform:rotate(45deg)
}

JavaScript

console.clear();
var s =45;
var r =45;
$('input').on('input',function(){
  r=45+parseInt($(this).val());
  if (r>=s){
    $('.spinner-inner:last').clone().appendTo('.spinner')
    s+=45;
  } else if (s<s-45){
 		$('.spinner-inner:last').not(':first').remove();
  }
  r=r+15;
  $('.spinner-inner:last').animate({borderSpacing:r},{
      step: function(now,fx) {
        $(this).css('transform','rotate('+now+'deg)');
      },
      duration:'slow'
  },'linear');
})