JSFiddle - React, Tailwind, and code Playground

by Placebooo

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');
$('.top').hover(function(){
	arrow.css({ transform: 'rotate(90deg)' });
});
var arrow = $('.arrow');
$('.bottom').hover(function(){
	arrow.css({ transform: 'rotate(-90deg)' });
});
var arrow = $('.arrow');
$('.left').hover(function(){
	arrow.css({ transform: 'rotate(0deg)' });
});
var arrow = $('.arrow');
$('.right').hover(function(){
	arrow.css({ transform: 'rotate(180deg)' });
});