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

Spinner - red circle to green square to blue triangle

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Eric Medchill
    • Alex Walker

      My first attempt was similar to this one. I wasn’t entirely satified with the transition to and from the triangle, so I did a bit of a restructure.

  • Alex Walker

    Nice. Clip-path is a great approach.

  • Alex Walker

    I was going to try an SVG solution next, but haven’t got there yet. Looking forward to to seeing that one!

  • Alex Walker

    Thanks for the idea, Dan. It was a fun problem to think about. I had the idea of posting it here, but it took a little while to get around it.

  • Stanislav

    http://codepen.io/anon/pen/gkocx
    This is my solutio. I like Scott Kellum’s. Gj.

  • Matheus Motta de Almeida

    Hey Scott,

    When I was trying to understand your solution I couldnt figure it out the need for margin: 1 .9 on the triangle section.

    Could you clarify it for me?

    • Scott Kellum

      The triangle is slightly wider than the square and the circle so the margins need to be adjusted for that instance.

    • MistiDFox

      I just got paid
      —————————————————–

      OPEN THIS LINK–>>­OPEN NEXT TAB FOR MORE INFO AND HELP

  • Simon Buerger

    Best one here so far I think

  • Alex Walker

    The color palette made me guess it was a Google loader, but can’t say I’ve seen anything quite like it.

    I have another couple of ideas for challenges. People seemed to enjoy this one and we’ve already got some cool answers.

  • Alex Walker

    Nice idea!

  • Alex Walker

    Anyone who can figure out the SVG approach well will be hard to beat. I don’t know much about SMIL so I’d be interested to see that one.

  • Alex Walker

    That’s a good one, Sharat.

    • Sharat M R

      Thks :)

  • Alex Walker

    That’s pretty cool, @jeremykarlsson:disqus

    • Jeremy Karlsson

      Thanks! The morph + rotation from triangle to circle was just updated slightly. I can’t figure out how to make that better looking though. Making circle with in SVG is done in another way, not with only M & L, so if I do that, it won’t morph nicely. I had to transform the triangle to a small square with a rounded border to make a circle.

  • Alex Walker

    It’s not too bad, Douglas. Getting in and out of the triangle is hard when you use border widths to make the triangle. I ended up using a psuedo element (:after) to make the triangle just to make the transitions a bit smoother.

  • Reinier Pelayo
    • Alex Walker

      Nice and efficient.@reinierpelayo:disqus