JSFiddle - React, Tailwind, and code Playground

by Dark Hole

HTML

<script src="//code.jquery.com/jquery-3.1.1.js"></script>
<span class="debug"></span>  
  <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 cur = 0;
$('.top').hover(function(){
	var need = calc(cur, 90);
	arrow.css({ transform: 'rotate(' + need + 'deg)' });
  cur = need;
});
$('.bottom').hover(function(){
	var need = calc(cur, 270);
	arrow.css({ transform: 'rotate(' + need + 'deg)' });
  cur = need;
});
$('.left').hover(function(){
	var need = calc(cur, 0);
	arrow.css({ transform: 'rotate(' + need + 'deg)' });
  cur = need;
});
$('.right').hover(function(){
	var need = calc(cur, 180);
	arrow.css({ transform: 'rotate(' + need + 'deg)' });
  cur = need;
});
function calc(cur, need) {
	if(cur <= need || cur - need < 180) return need;
  return need + 360;
}