a frontend designer

Ouroboros Sass/CSS Spinner

With all the animation options available to modern browsers I thought it’d be interesting to experiment with the loading spinner. I’d seen a few pie-style progress animations but none rotated the way I wanted. How hard could it be? It turned out to be kinda complicated.

After some half-hearted attempts I realized it was going to take more than a couple elements to get this to work. I sketched it out on paper and eventually hit on using a couple nested rectangles, rotating independently. Figure 1 shows the final product.

A few variations of the Ouroboros spinner. You can adjust the size, opacity, colors, and speed. If you’re running IE 9 or less you’ll see a fallback animated gif.

A few things to note:

Dissecting the Spin

The spinner works by animating two separate rectangles of the same color at alternating intervals. And those rectangles are children of other rectangles with overflow:hidden. At a certain point each side “waits”, or more accurately it animates over time from a degree to that same degree, simulating a wait.

It’s difficult to describe so in Figure 2 below I’ve removed the border-radius on all the elements and colored the two rectangles separately so you can see what’s happening.

A deconstruction of the spinning elements, slowed to 6 seconds. The lighter colored rectangles contain the more saturated colored rectangles.

Why Ouroboros?

As explained by Wikipedia, the Ouroboros is “an ancient symbol depicting a serpent or dragon eating its own tail.” That seemed like an appropriate name. Figured it had to be better than calling it “ui-spinner”.

If you’d like to try it out, and for a complete list of available parameters, head to my Github account. It’s built for easy integration with Sass.