How it works

The spinner uses only CSS to make the animation, no javascript involved.

Is is made of 3 concentric, successively smaller boxes, with border radii set to 50% so they make circles. One side of the box is made transparent, and one has a double border line so it looks like a kind of "trail" left behind as the circle rotates.

The outer box is made to rotate slowly (3s), carrying its contents with it. The second box is then made to rotate faster and in the opposite direction, so it appears to run "backwards", but quite slowly. The box inside that is again made to rotate forwards slightly faster, so it too appears to rotate forwards.

Here's the CSS code.


.spincontainer {
padding: 10px;
text-align: center;
background-color: lightgrey;
}


.spinpaper {
display: inline-block;
position: relative;
box-sizing: border-box;
text-align: center;
width: 150px; height: 150px;
background-color: rgba(255,255,255,1);
border-radius: 50%;
}


.spintext::after {
width: 100%;
position: absolute;
top: 50%; left: 0;
margin-top: -11%;
text-align: center;
font-size: 15px;
content: "\00231B";
}


.turning1, .turning2, .turning3
{
display: inline-block;
position: absolute;
box-sizing: border-box;
margin: auto;
width: inherit; max-width: 90%;
height: inherit; max-height: 90%;
top: 0; bottom: 0; left: 0; right: 0; /* Force centering by pulling on all four corners */
border-radius: 100%;
}


.turning1 {
border-top:    3px solid rgba(0,0,255,1);
border-right:  3px solid rgba(0,0,255,1);
border-bottom: 3px double rgba(0,0,255,0);
border-left:   3px double rgba(0,0,255,0.5);
animation: turner linear 3s infinite normal;
}
.turning2 {
border-top:    3px solid rgba(255,0,0,1);
border-right:  3px solid rgba(255,0,0,1);
border-bottom: 3px double rgba(255,0,0,0.5);
border-left:   3px double rgba(255,0,0,0);
animation: turner linear 1.8s infinite reverse;
}
.turning3 {
border-top:    3px solid rgba(0,255,0,1);
border-right:  3px solid rgba(0,255,0,1);
border-bottom: 3px double rgba(0,255,0,0);
border-left:   3px double rgba(0,255,0,0.5);
animation: turner linear 1.2s infinite normal;
}


@keyframes turner{
from {transform:rotate(0)}
to {transform:rotate(360deg)}
}