JSFiddle - React, Tailwind, and code Playground

HTML

<div id="spin_block">
<div id="spin"></div>  
<div id="spin_center"></div>
</div>

CSS

#spin{
  background:url(http://pngimg.com/uploads/spinner/spinner_PNG44.png) no-repeat;
  background-size:80% 80%;
  width:250px;
  height:230px;
  background-position:25px 6px;
  margin:0;
  padding:0;
}
#spin_block{
  width:250px;
  height:230px;
  position:relative;
}
#spin_center{
  -webkit-box-shadow: 0px 0px 17px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 17px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 17px 1px rgba(0,0,0,1);
  width:60px;
  height:60px;
  border-radius:100%;
  position:absolute;
  left:95px;
  top:86px;
  background:url(http://pngimg.com/uploads/spinner/spinner_PNG44.png) no-repeat;
  background-size:200px 184px;
  background-position:-70px -80px;
}
body{
  padding:50px;
}

JavaScript

document.querySelector("#spin").addEventListener("click",function(){
	
  	if(this.getAttribute("data-run") == "1")
    	return;
  	this.setAttribute("data-run","1");
  var speed = 50;
  var angle = 0;
  var _this = this;
  (function(){
    	
  	_this.style.transform = "rotate("+angle+"deg)";
    angle = (angle + speed)%360;
    speed -= .2;
    if(speed > 0)
    	setTimeout(arguments.callee,1000/60);
      else
      _this.setAttribute("data-run", "0");
    	
  })();
},false)