<div class="container">
  <div class="circle">
    <div class="circle__arrow"></div>
  </div>
  <br><br>
  <button onclick="run()">click</button>
</div>

:root {
  --rotate-to: 2300deg;
}

body{
  display: flex;
  justify-content: center;
}

.container{
  padding: 60px;
  border: 1px solid #777;
}

.circle {
  width: 180px;
  height: 180px;
  border: 1px solid red;
  border-radius: 100%;
  position: relative;
}

.circle__arrow{
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: red;

  position: absolute;
  top: 0px;
  transform-origin: center 5.7em;
  left: calc(50% - 5px);

  transform: rotate(100deg);
}

.animate{
  animation-name: pulse;
  animation-duration: 5250ms;
  animation-fill-mode: forwards;
}

@keyframes pulse {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(.5,0,0,1);
  }
  100% {
    transform: rotate(var(--rotate-to));
  }
}

function randomRange(min, max) {
  return ~~(Math.random() * (max - min + 1)) + min
}

function run() {
  
  let root = document.querySelector(':root');
  let rand = randomRange(0, 360);
  let rotate = 2160 + 240;

  console.log('rand', rand);

  root.style.setProperty('--rotate-to', `${rotate}deg`);

  let element = document.querySelector('.circle__arrow')
  element.classList.remove('animate')
  setTimeout(() => {
    element.classList.add('animate')
  }, 100)
}