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 for post
Image for post
Image from Buzzfeed

And here’s my live demo of it:

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

Image for post
Image for post

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!

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store