A few months ago there was a fun little problem posted to Reddit. I gave it a shot, but I thought it might be fun to throw it to the SitePoint readers and CSS conjurers to see what you can come up with.
There are at least 4 approaches that I can think of, but there may be more.
The only prize is the glory of showing everyone the majesty of your CSS skills.
Your task — should you accept it — is to reproduce this animated spinner GIF in HTML and CSS.
As you can see, it’s a looping animation — probably a loading spinner — that transitions from a red circle to a green square to a blue triangle. You’ll also notice the shape rotates clockwise each time it changes.
I’ve set it up as a basic CodePen that you are welcome to fork as your starting point. I’ve embedded the original GIF so you can see what you’re working on.
- HOWEVER: Be aware that simplicity and elegance is king. An efficient, close approximation of the GIF done in 10 lines of code will probably be judged as a better solution than a ‘pixel-perfect’ solution that uses 100 lines. A pixel-perfect 10 line solution trumps all.
- The HTML is one DIV. You’d need to convince us that you had a very good reason to change that.
- Feel free to use any of the functionality provided by Codepen including Sass, Prefixfree.
- Backward browser compatibility will be appreciated but is not central to our criteria
Present your solutions as CodePen links posted to the comments below. You’ve got a week to submit your best ideas.
Your time begins…
P.S. Keep an eye out for future challenges — I have a few others in mind.
We looked at what we thought were the best answers and picked our favourite here.
Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 40+ of SitePoint's book covers.