Design & UX
By Alex Walker

The CHALLENGE #1: Recreate this GIF in HTML & CSS

By Alex Walker

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…


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.

  • Scott Kellum

    Did this this morning using the exact markup provided:

    Working on another, more pixel-perfect, SVG version now.

  • Eric

    Did a quick little pure CSS version here:

  • 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.

  • HAH! That was my post. Thanks a lot for the help… your answer was pretty impressive.
    Warning: spoiler answers in this link:

  • Simon Buerger

    my attempt using clip-path (only checked in chrome)

  • 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.

    • Btw, I’m pretty sure I found that on reddit. Most are not possible in CSS (not to my knowledge), but maybe you’ll find some inspiration for other challenges there. I’m loving this… keep the challenges coming!

  • Here is my attempt :

    I didn’t have time to finish it.

    The idea behind the first test was to use snapsvg to animate paths. But I got a issue with the circle path, so I gave up.

    The second idea is to use SMIL, but the paths must have the exact same structure.

  • Stanislav
    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


  • Guest

    This is my attempt… the triangle in not in the right shape though and the speed is different…

  • Guest

    Here is my attempt using keyframe and transforms

  • Douglas Juliao

    My version

    sorry it did not work very well :(

  • Douglas Juliao
  • void_imagineer

    Here is my attempt – tweaking with css border-radius.

  • Sharat M R i guess thats close enough…some issue in firefox though…messes up the direction of animation..

  • 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

  • Amit
  • RplusTW
  • Singh Satnam

    Here’s my Attempt :

    I think SVG/polygon or CSS/clip-path would be better, as Square to Triangle just gives fading effect !

  • An almost perfect solution:
    Using animating clip-path. Works only in chrome. Not an easy challenge :)

  • My solution is

    I remember playing around with this challenge when it first came out, but I never came up with a satisfactory solution. I just went through Noah Blon’s article about animating SVG with SMIL (, which is about this very challenge. In the end my solution is very similar to his, but I simplified the keyframes and modified the timing to make it much closer to the original. What do you think?

Get the latest in Design, once a week, for free.