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.
The Challenge
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.
See the Pen bKmie by SitePoint (@SitePoint) on CodePen.
The Rules
- There are no hard and fast rules. If you want to use JavaScript-powered VRML, go for it! Border-radius, SVG, canvas, whatever.
- 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…
Now.
P.S. Keep an eye out for future challenges — I have a few others in mind.
UPDATE:
We looked at what we thought were the best answers and picked our favourite here.
