:root {
	--duration: 30;
	--m: 250;
	--path: path('M250 0c138 0 250 112 250 250S357 707 248 707C140 707 0 388 0 250S112 0 250 0Z');
}
/* @media (min-height: 55em ) and (min-aspect-ratio: 1/1.414) {
	:root {
		--path: path('M250 0c138 0 250 112 250 250S357 707 248 707C140 707 0 388 0 250S112 0 250 0Z');
	}
} */
body {
	margin: 6em;
	display: grid;
}
time {
	position: relative;
	margin: auto;
	width: 500px;
}
time::after {
	width: calc(500px + 12em);
	aspect-ratio: 1;
	content: '';
	background: hsl(0 50% 50% / .5);
	position: absolute;
	top: -6em;
	margin-left: -6em;
	border-radius: 50%;
}
div {
	text-align: center;
	width: 1em;
	aspect-ratio: 1;
	font-size: 5em;
	background: hotpink;
	offset-path: var(--path);
	animation-name: go;
	animation-duration: calc( var(--duration) * 1s);
	animation-delay: calc( var(--index) * (var(--duration) / 12) * -1s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	position: absolute;
	top: 0;
	offset-anchor: bottom center;
}
div:nth-of-type(1) { --index: 1; }
div:nth-of-type(2) { --index: 2; }
div:nth-of-type(3) { --index: 3; }
div:nth-of-type(4) { --index: 4; }
div:nth-of-type(5) { --index: 5; }
div:nth-of-type(6) { --index: 6; }
div:nth-of-type(7) { --index: 7; }
div:nth-of-type(8) { --index: 8; }
div:nth-of-type(9) { --index: 9; }
div:nth-of-type(10) { --index: 10; }
div:nth-of-type(11) { --index: 11; }
div:nth-of-type(12) { --index: 12; }


@keyframes go {
  100% {
	offset-distance: 100%;
  }
}