Loading Animations #5: Slack’s Loading Screen

Copying Slack’s loading icon using CSS animation

Jag Talon
Nov 19, 2015 · 3 min read

Slack’s loading animation is a little bit more complex than my previous posts so I thought I should try to copy this one using CSS animations. Here’s the loading screen for reference:

Implementing it in SVG is often my first choice because aligning things in Illustrator is often easier than alligning <div> elements myself. So I first drew the logo with rounded rectangles and thought about shrinking and expanding them using scale(). Unfortunately, that didn’t work as well as I expected because it just made the rectangles fatter and weird-looking since they were scaled down.

I then drew them as lines, although I couldn’t figure out how to make them grow and shrink properly using CSS. And since the attributes x1, x2, y1, and y2 aren’t valid properties in CSS, I was tempted to use JavaScript to animate this logo.

I then remembered Lea Verou’s talk on making pie charts, and it involved creating partitions on the pie using the stroke-dasharray property on the SVG element. You can create the illusion that it’s growing and shrinking by adjusting the values of this property. Here’s an example of some heads that use stroke-dasharray to grow and shrink:

http://snapsvg.io/demos/#game

And here are Lea’s SVG pie charts:

http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/

So! Knowing that I could use stroke to give the illusion of growing and shrinking, I could now make the animation. I made a line in Illustrator with an 18pt stroke:

I played around with stroke-dasharray values to get the correct starting and ending values for the animation:

Oh, I also added the mix-blend-mode property to match (well, almost) the color on the overlapping lines in the logo.

After that, most of my time was actually spent on getting the animation to look right. This is also the part where I used pen and paper to list down the important bits which helped me make the keyframes. If you want to see how it works, check out the animation on Codepen! It won’t work on Edge or IE at the moment, though:

Till next time!

Update!

I spent the better part of today tweaking the animation, so here’s one that’s much closer to the real thing!

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