Loading Animations #4: iMessage’s Typing Indicator

Today, we’re going to re-implement that anxiety-inducing typing indicator. It’s not really a loader, but it very much acts like one. I’m going to do this in SVG, so just keep in mind that CSS transforms on SVG elements don’t work in IE or Edge.

If you’ve never seen it before, it’s this one:

Image from Buzzfeed

And here’s my live demo of it:

Easiest way to recreate it was with Illustrator, and animating it through CSS.

It’s made of five ellipses and one rounded rectangle. Here’s the final SVG if you’re interested:

Animating the three dots was rather straightforward since it only involved me getting the right timing and the right easing (easy enough with Firefox / Chrome’s cubic-bezier editor).

When it came to scaling the bubbles, though, I ran into a bit of trouble. I didn’t know that the transform “establishes a new user space (current coordinate system) on the element it’s applied to” which basically means that I not only have to scale, but I also have to translate to keep it in place. You can read more about translating SVG elements in StackOverflow. I wrote a small mixin that helped me tweak the scaling factor without much fuss:

I think I got pretty close to the real thing, but I’m pretty sure there are some subtle animations that I’m missing. Feel free to mess around with it and to use the asset for whatever!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.