CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

How'd They Do That? CrocoDillon's Single Element Slack Loader

Every once in a while you will interact with a feature element so subtle, yet so intriguing you will simply be impressed. You, impressed. That's not easy, right? But it happens. And then the curiosity sets in. Take slack.com's loading animation by CrocoDillon. This imaginative use of both width and shadows on a single element, and it's corresponding before and after pseudo-elements, is proof that the sum of parts is indeed greater than the whole.

To understand the transitions at work here, we must first understand how to create some basic shadows on a single element. After all, the box-shadows are what steal the show here. Four shadows work together in animated scenes that simultaneously create the grow, shrink, and rotation effects we see in the slack loader. These effects are really artifacts of our animated shadows on a single element.

Two shadows are controlled by one set of keyframes wired up to the before pseudo-element, and the other two shadows are controlled by a second set of keyframes wired up to the after pseudo-element. If you understand the animation sequence in the before keyframes, then you will understand the sequence in the after keyframes. Lets focus on the keyframes wired up to the before pseudo-element. Here are the borders at work on one element that happens to have been rotated 165 degrees.

The above pen in really just box-shadow 101, maybe, but it's crucial to understanding the transitions at play in the original animation. I forked CrocoDillon's original pen to take this understanding a step further by doing the following:

Isolating only a single set of keyframes (remember, understand one and you understand the other).

Making small changes like increasing the width/thickness and border radii of the shadows.

Slowing down the animations to observe their behavior

The differences between the original and forked (instructional) pen.

Here's the forked pen. Compared with the finished product, it looks as if the elements are perhaps in the wrong place and the example is wrong. But change only the size and the thickness vars to 2.5em and 0.5em, respectively, and you'll see what you expect.

Commenting out just one line, and thus activating the after keyframes brings us much closer to the finished product:

We're all for progressive enhancement, but CodePen is a bit unique in that it's all about writing and showing front end code, including JavaScript. It's required to use most of the features of CodePen.