Loading Animations #4: iMessage’s Typing Indicator

Jag Talon

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!

Jag Talon

Written by

Jag Talon

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade