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 things to note:
- This is mostly experimental, created in part for a Webkit-only project. It works on most modern browsers but should you decide to use it be sure to test thoroughly. I’m happy to try to fix any issues you find.
- You can’t animate pseudo elements in Safari yet. Once it has suppport I can simplify the spinner HTML.
- The “hole” in the middle in two of these examples is not really a hole. It’s a pseudo element placed in the center, the size of which gets calculated to roughly 60% of the overall spinner size, and its color set to match the color of the background it sits on. I realize enabling this feature makes it slightly less useful, as you can’t always predict the background color, but it looks cool, right?
- Browser support is limited to only the most recent versions: Chrome 24+, Firefox 18+, IE 10+, Opera 12+, Safari 6 & Mobile Safari (and other than IE it probably works in older versions). For IE 9 or lower you can include the CSS that swaps in a 32x32 animated gif, centered where the spinner would be. It’s not nearly as nice but, hey, what are you gonna do.
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.
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.