JSFiddle - React, Tailwind, and code Playground
CSS
body {
height: 60px;
width: 60px;
border: 1px black solid;
}
@keyframes rotate {
from {
transform: translate3d(0,0,0) rotate(0);
}
to {
transform: translate3d(0,0,0) rotate(360deg);
}
}
.rotate {
border: 2px solid;
border-color: black/* black transparent transparent */;
border-radius: 50% 50%;
transform-origin: 50% 50%;
height: 100%;
width: 100%;
padding: 1px;
position: relative;
box-sizing: border-box;
animation: rotate 100s linear 0s infinite;
}
JavaScript
var p = document.body;
for (var i=0; i<10; i++) {
var e = document.createElement("div");
e.classList.add("rotate");
p.appendChild(e);
p = e;
}