JSFiddle - React, Tailwind, and code Playground
HTML
<div id="spinner">spin!</div>
<button onClick="spin();">start/stop</button>
CSS
#spinner {
-webkit-animation: spin 2s linear infinite;
-webkit-animation-play-state:paused;
border: 1px dashed;
border-radius: 50%;
width: 5em;
height: 5em;
margin: 2em auto;
padding: 2em;
}
@-webkit-keyframes spin {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
JavaScript
function spin() {
var spinner = document.getElementById("spinner");
if (spinner.style.webkitAnimationPlayState === 'running') {
spinner.style.webkitAnimationPlayState = 'paused';
document.body.className = 'paused';
} else {
spinner.style.webkitAnimationPlayState = 'running';
document.body.className = '';
}
}