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.