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;
    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(){
			anim(-135, 225);
		},
		function(){
			anim(225, -135);
		});
	});


function anim(deg_from, deg_to) {   
    $({ deg: deg_from } ).animate({
        deg: deg_to
    }, {
        duration: 1000,
        progress: function (animation, progress) {
            $("div.prec").html(Math.round(progress*100)+"%");
        },
        step: function(now) {
            $('#box').css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}