I first tried implementing it through two triangles. And got a satisfactory output
#wrapper {
margin-left: 40vw;
margin-top: 20vh;
}
#fidgetu {
width: 0;
height: 0;
position: absolute;
margin-top: 3vh;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
animation: rotate 2s linear infinite;
}
#fidgetd {
width: 0;
height: 0;
position: absolute;
margin-top: 3vh;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}<div id="wrapper">
<div id="fidgetu">
</div>
<div id="fidgetd">
</div>
</div>I guess drawing a fidget spinner would require 4 div circles and 3 div rectangles to connect the central circle to the other three and a wrapper div (applying animate property to this div). But the positioning is messing up.
Now how do I position them appropriately such that the entire block rotates around its center?