JSFiddle - React, Tailwind, and code Playground

by Nikita_Lugovykh

HTML

<div>↻</div>

CSS

html {
  background-color: white;
  height: 100%;
}

body {
  height: inherit;
  background-color: orangered;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  display: inline-block;
  font-size: 5rem;
}

JavaScript

const spinner = document.querySelector('div');
let rotateCount = 0;
let startTime= null;
let rAF;

function draw(timestamp) {
	if(!startTime) {
  	startTime = timestamp;
  }

  
  rotateCount = (timestamp - startTime)/3;
  if (rotateCount > 359) {
      rotateCount %=360
 
      /* rotateCount = rotateCount % 360 */;
    }
    spinner.style.transform = `rotate(${rotateCount}deg)`;

		rAF = requestAnimationFrame(draw)
}
draw();


spinner.addEventListener('click', ()=> {
	cancelAnimationFrame(rAF);
  if (!startTime) {
  draw();
  }
  startTime = null;
})