Asana did a redesign last month. If you’ve been using it yourself recently, you might have noticed this loading icon:
Before I dove in and looked at the actual implementation, I thought I should try to replicate it myself first. I started with just three divs, and positioned them using translate to match the Asana logo:
I then added rotation to the container:
And then finally translating and scaling the individual circles to grow and shrink the radius of the logo. Here’s the live version:
The toughest part of making this animation is getting just the right cubic-bezier values to make it look like the original one. This is where the developer tools really helped. I just dragged the knobs to get the graph that I wanted.
However, it turns out that the actual implementation is different from what I made …
How Asana’s Loader Actually Works
The three dots were made a little bit differently: It just uses one div, but takes advantage of the :before and :after pseudo-selectors. It’s kinda nice that it only needs one element for all three circles!
As for the animation, the three circles actually intersect each other instead of just having its radius reduced to zero (which is what I did). Here’s a video of that:
Other than that, the scaling and the rotating parent element were the same. You can check it out for yourself in this Pen!
Final notes on Asana’s implementation
Asana’s impementation has some prefixes that don’t need to be in there:
- -moz-transform: Firefox 15 was the last version to use this vendor prefix. That was released 3 years ago.
- -moz-animation: Last version was also Firefox 15.
- -o-transform: Opera 12.10 no longer has this prefix. This was released 3 years ago as well.
- -ms-transform: IE 9 was the last browser to support this prefix. This was released 4 years ago.
You also get this page if you try to access it with any of these browsers so they can absolutely go away!