Animation Practice: Loading Screen 1

I've been challenging myself with some animations in Figma lately. One thing I'm a big fan of is animated loading bars/screens etc. so I wanted to make one of my own.

This was a quick practice animation that uses a few components variants to stagger the loading bar and make the text glow pulsate.

The neon glow effect is created using stacked drop shadows at various blur levels. I love the way it looks, and it's 100% achievable using only CSS for converting to web.

One thing that is a bit annoying about this is how the text and glow don't look completely cohesive. It almost looks as though there is an extra very thin stroke between the text and the glow - this isn't the case, and in the design file the glow and text are a perfectly smooth blend (see below). I'm assuming it's a result of some compression that happens in Figma previews, and it doesn't help that the video has been downloaded, converted, uploaded and no doubt compressed by Dribbble.

I still like it.