Loading Animations #5: Slack’s Loading Screen
Copying Slack’s loading icon using CSS animation
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 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:
And here are Lea’s SVG pie charts:
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!
I spent the better part of today tweaking the animation, so here’s one that’s much closer to the real thing!