JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.1.1.js"></script>
  
  <div class="line">
    <div class="arrow"></div>
    
    <div class="top button"></div>
    <div class="left button"></div>
    <div class="right button"></div>
    <div class="bottom button"></div>
  </div>

CSS

*{
  transition: 1s;
}
.line{
  margin: 10em auto;
  width: 300px;
  height: 300px;
  border: 1px solid #111;
  position: relative;
  border-radius: 100%;
}
.arrow{
  width: 120px;
  height: 10px;
  background: #111;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5px -120px;
  transform-origin: 100%;
  animation: run 6s linear infinite;
}
.top{
  position: absolute;
  top: 0%;
  left: 50%;
  margin: -10px -10px;
  border: 1px solid #111;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}
.bottom{
  position: absolute;
  top: 100%;
  left: 50%;
  margin: -10px -10px;
  border: 1px solid #111;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}
.left{
  position: absolute;
  top: 50%;
  left: 0%;
  margin: -10px -10px;
  border: 1px solid #111;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}
.right{
  position: absolute;
  top: 50%;
  left: 100%;
  margin: -10px -10px;
  border: 1px solid #111;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

.button:hover{
  background: #111;
}

JavaScript

var arrow = $('.arrow');
var last_pos = 0;
var v360 = 0;

function arrow_to_pos(vpos) {
	if (last_pos == 0 && vpos == 270) {
    v360 -= 360;
  } else if (last_pos == 270 && vpos == 0) {
    v360 += 360;
  }
  last_pos = vpos;
	arrow.css({ transform: 'rotate('+(v360+last_pos)+'deg)' });
}

$('.top').hover(function(){
  arrow_to_pos(90);
});

$('.bottom').hover(function(){
  arrow_to_pos(270);
});

$('.left').hover(function(){
  arrow_to_pos(0);
});

$('.right').hover(function(){
  arrow_to_pos(180);
});