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 debug = $('.debug');
var cur = 0;
$('.top').hover(function(){
	var need = calc(cur, 90);
	arrow.css({ transform: 'rotate(' + need + 'deg)' });
  cur = reset(need, arrow);
});
$('.bottom').hover(function(){
	var need = calc(cur, 270);
	arrow.css({ transform: 'rotate(' + need + 'deg)' });
  cur = reset(need, arrow);
});
$('.left').hover(function(){
	var need = calc(cur, 0);
	arrow.css({ transform: 'rotate(' + need + 'deg)' });
  cur = reset(need, arrow);
});
$('.right').hover(function(){
	var need = calc(cur, 180);
	arrow.css({ transform: 'rotate(' + need + 'deg)' });
  cur = reset(need, arrow);
});
function calc(cur, need) {
	if(cur <= need || cur - need < 180) return  need;
  return need + 360;
}
function reset(need, el) {
	need = need > 360 ? need - 360 : need;
  el
  	.css({ 'transition': '0s' })
    .css({ 'transform': 'rotate(' + need + 'deg)' })
    .css({ 'transition': '' });
  debug.text(need);
  return need;
}