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>

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;
    transition: all 1s;
    background-color: green;
    z-index: -1;
    transform: rotate(-135deg);
    -ms-transform: rotate(-135deg); 
    -moz-transform: rotate(-135deg); 
    -webkit-transform: rotate(-135deg);
}

JavaScript

$(function(){
		$('#circle').hover(function(){
			loopit("c");
		},
		function(){
			loopit("nc");
		});
	});

function loopit(dir){
    if (dir == "c"){
        for (var i = -135; i < 225; i++){
            actions(i);        
        }
    }
    else{
        for (var i = 225; i > -135; i--){
            actions(i);        
        }
    }
}

function actions(i){
    var box = $('#box');
    box.css('transform','rotate(' + i + ' deg)');
    box.css('-ms-transform','rotate(' + i + 'deg)');
    box.css('-moz-transform','rotate(' + i + 'deg)');
    box.css('-webkit-transform','rotate(' + i + 'deg)');
    prec = (100*(i + 135))/360;
    $("div.prec").delay(100).html(Math.round(prec)+"%");
}