The CHALLENGE #1: Recreate this GIF in HTML & CSS
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.