JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="clock">
<div id="hand">
<div id="arm">

</div>
</div>
</div>

<p>
Sixty second full rotation
</p>

CSS

#clock {position:relative;overflow:hidden;width:33px;height:33px;border-radius:500px;border:solid #999999;border-width:4px;background-color:#999999;margin:50px auto;}
#hand {position:absolute;top:0;left:0;width:100%;height:100%;}
#arm {width:3px;margin:auto;height:50%;background-color:#dedede;border-radius:500px;}

JavaScript

var hand = document.getElementById("hand");
var rot = 0;


function startTime() {

rot = (rot + 6);

hand.style.transform = "rotate(" + rot + "deg)";
  
  
if (rot == 360) {rot = 0;} 
  
setTimeout(function() {startTime()}, 1000);
}

startTime();