JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cont">
    <div id="circle" class="circle">
        <div class="prec">
            0%
        </div>
		<div id="box" class="box">
		</div>
    </div>
<div>
    <div id="s"></div>

CSS

.cont{
    margin: 80px;
}
.prec{
    top: 14px;
    position: relative;
}

.circle{
    position: relative;
    text-align: center;
    width: 50px;
    height: 50px;
    border: 5px solid #39B4CC;
    border-radius: 50px;
    background-color: #e5e5e5;
}

.box{
    position: relative;
    top: 5px;
    left: 50%;
    width: 26px;
    height: 26px;
    transform-origin: top left;
    -ms-transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    background-color: green;
    z-index: -1;
    transform: rotate(-135deg);
    -ms-transform: rotate(-135deg); 
    -moz-transform: rotate(-135deg); 
    -webkit-transform: rotate(-135deg);
}

JavaScript

var i = -135,box = $("#box"),prec;
setTimeout(function(){
    if($("#circle").is(":hover"))
       loopit("c");
    else
        loopit("nc");
},1);
function loopit(dir){
    if (dir=="c")
        i++;        
    else
        i--;
    if(i<-135)
        i=-135;
    if(i>225)
        i=225;
    prec = (100*(i + 135))/360;   
    $(".prec").html(Math.round(prec)+"%");
    box.css("transform","rotate("+i+"deg)")
    .css("-ms-transform","rotate("+i+"deg)")
    .css("-moz-transform","rotate("+i+"deg)")
    .css("-webkit-transform","rotate("+i+"deg)");
    setTimeout(function(){
    if($("#circle").is(":hover"))
       loopit("c");
    else
        loopit("nc");
    },1);
}