JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<div></div>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fe0;
}

:root {
  --r: 100px;
  --t: 0;
}

div {
  overflow: hidden;
  position: absolute;
  left: calc(50% - var(--r));
  top: calc(50% - var(--r));
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  box-shadow: 0 0 0 5px #000;
  background: #fff;
}

div::before,
div::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

div::before {
  box-shadow: inset var(--r) 0 0 0 #000;
  z-index: calc(60 - var(--t));
}

div::after {
  box-shadow:
    inset var(--r) 0 0 0 #fff,
    inset 0 0 0 calc(var(--r) * (30 - var(--t))) #000;
  z-index: var(--t);
  transform: rotate(calc(360deg * var(--t) / 60));
}

JavaScript

let t = parseInt(location.hash.substring(1));

function updateT() {
	document.documentElement.style.setProperty('--t', t % 60);
}

if (isNaN(t)) {
	t = 0;
  setInterval(() => { ++t; updateT(); }, 30);
} else {
	updateT();
}