Dev.to is a fantastic resource - I've a lot of respect for Ben Halpern - the founder. He's managed to build a really solid community around all things development.

If you're new to the blog, you'll know that loading animations/gifs are a guilty pleasure of mine. I love building them for all my side products.

I've experimented with CSS-only loading animations, animating SVGs like this one using MKBHD's logo, and more. Lately I've even started taking commissions, like this one for Brian Casel's new product Processkit, which is awesome.

But, lately I've found a very handy tool for creating these loading gifs - Anima. Specifically, timeline for Anima that lets you animate a Sketch artboard in numerous different ways. The gifs below took me about 2 hours to create in total - not bad for some rapid prototyping!

That's actually how I built these loading gifs for dev.to. (Disclaimer - I was not commissioned to build these, I just wanted to explore different ideas for animating the logo 😊)

Once I had some ideas to try - it was actually really easy to play around with the timeline for each artboard and export them as GIFs.

So far, my favourite is this one

Why not animate these with SVG and CSS?

Well, I could - and that would provide some benefits like scalability and potentially a smaller file size - but how small do we need these loading animations? The animation above is only 78kb, and that's before I've put it through an optimiser!

Also - until I know which one everyone prefers, I don't want to invest the time needed to animate the logo with just SVG/CSS alone.

So let me know which one you prefer, or if I can improve on any of them in any way. :)