Which dev.to loading GIF do you prefer?

So I've gone ahead and made some dev.to loading gifs based on the logo. Which one's your favourite?
This large gif is a bit choppy - see the actual gifs further below ;)

Whenever I start a side product, one of the first things that pops into my mind is the loading animation. Lately, I've found a nice tool that I'd like to share called Anima. It's a sketch plugin that lets you animate things like this. It's quite powerful and I'm still discovering more about the tool every week.

If anyone's interested, I'll make a quick tutorial showing how to make the GIF everyone likes, and maybe then I'll jump in and try contribute to the project on Github - that'd be cool :)

My first thoughts were what if the "V" moved to the left, replicating a console, and then "loading" just scrolled across...

I quite like this, but it wasn't quite right. After chatting with my lady friend (who's also a dev, hey Catia 😘), she suggested doing something like "npm run DEV" - which I really like the idea of. So, we came up with:

And a slight variation on that

Some other options

It's always good to have options! While building the above, I thought what if I just faded the letters in and out sequentially. So:

And another version of the above

Which do you prefer?

I know which is my favourite, but let me know what you think is best, and obviously if you've any ideas for how to improve it, lemme know.

PS: you can check out some of my other animations over here, like:

• This "coding" animation I made with CSS and SVG
• This one I made using MKBHD's logo
• Or this one I made using the Tesla logo

Comments

[Sebastian Vargr]

Pulse 1 or 2 definitely.

The others are animated with sudden stops or are cramped with too much going on imho.

They all look nice tho. :)

[Justin]

Agreed 100%, with a preference for Pulse 1 because Pulse 2's animation seems too quick.

[Chris Dermody]

Yep I agree actually. I thought I'd like the npm one more cos its clever. But as an actual loading icon the pulse is cleaner and simpler...

[Luke Inglis]

If there is one thing I've learned in my years of development work it's that clever is rarely a good thing.

[Robin Kretzschmar]

The first one is the one that I like the most!

Great work with all of them, but this one attracted my attention the most 😊

I like the idea of creation such a loading animation, maybe you can propose this via a github pull request.

EDIT: I'd love to read an article about Anima!

[Ben Halpern]

I agree. Overall the V being used as a command prompt arrow is genius!

Maybe in place of the loading there could also be one with a blinking thick cursor like the command line?

[Chris Dermody]

This is why I stopped iterating and wanted to share. Didn't think of this. Lemme see what I can do 🙌🏼🙌🏼

[Robin Kretzschmar]

I'm curious! 😎

Maybe the V can turn in a way that one side of the V becomes the cursor (it splits during the turning). Just an idea :)

[Robin Kretzschmar]

Even better idea with the blinking cursor! This connects even more to the developmer-terminal-feeling.

[Phil Nash]

Same wavelength here. I was going to comment "how about a blinking cursor instead of the text 'loading'" and I'm glad I read the comments first!

[Michael Tharrington]

Such a fan of this one!!

[Stephen Chiang]

I'm definitely drawn to the loading and pulse 1...I think the sweet spot might be somewhere between or combined.

🍻

[Abe Dolinger]

I like Pulse 1, and I would love "Loading..." if it didn't have the word "loading" scrolling across. Let me crudely mock up the keyframes in ASCII here, that's what you wanted, right?

// open is the same
DEV
// v transition
>
// dots appear/pulse
>...
// dots disappear
>
// v transition happens in reverse
DEV
//repeat

[Chris Dermody]

Interesting! Not very difficult to do given what I've got so far...

[Henry Quinn]

The NPM ones are making some assumptions that everyone here is a web dev. :P

[Chris Dermody]

yeah true - sorry it's just a command I'm most familiar with and wanted to try. is there a command that's more universal?

[Henry Quinn]

Just saying there are Python and Go developers, DevOps engineers, people who primarily do C++ API's or whatever.

NPM is specific to JavaScript. And usually web specific at that.

The other ones are cool, though!

[Alexey Mironov]

I'd say, npm is specific to npm. There are web developers who use yarn or pnpm as well. :)

[Henry Quinn]

The Node Package Manager is, in fact, specific to JavaScript.

[Muhimen]

Maybe then git clone?

[Artur Muniz]

I guess make is more universal

[🦄N B🛡]

ls
rm -rf /
git

[Muhimen]

Nope I am not a web dev. I write AI, ML and all that stuff. 😁

[David J Eddy]

Option 1. Nice and smooth, requires the lowest amount of eye strain to comprehend.

I like the animation of option 5 and 6 but using npm exclusively is alienating. Maybe if we have npm, gem, composer, helm, etc; sure.

[Chris Dermody]

Your comment about eye strain makes sense actually, there's a lot of quick movement that makes your brain work hard.... interesting. Also yeah NPM could be a bit alienating now that you mention it...

[Guillaume Martigny]

If you want to use the clever link between the V and a command prompt, why not do a classic CLI loading animation? I'm thinking of the spiny bars (-\¦/-...) or the newer walking dots (github.com/sindresorhus/ora)

[Chris Dermody]

oooh this is nice - good idea!

[Nicolus]

The first one is very original, I like it. But honestly the Pulse 1 just looks better.

I don't really like the "npm run dev" idea because it gives the impression that this is a node.js community. Why not "go dev", "python dev", or "php artisan dev" ?

[Michiel Hendriks]

I like the idea of the command prompt. What if after rotating the V you zoom out (so it becomes tiny) and a command is executed which then makes output scroll to the bottom. So the black dev rectangle is like a tiny computer terminal. It could end with the big DEV text eventually appearing on the screen.

[Chris Dermody]

That's interesting - although the logo is small enough, I'm not sure I can make it work, but I might try that. What command would you recommend?

[Michiel Hendriks]

If it's tiny enough you can't make up the command which was entered. But maybe something like

> make community

[Casey Brooks]

I like Pulse 1. Simple and subtle.

The others look really nice, but I think they're just a bit too "busy" for a loader icon. They might work well for a splash screen that shows the animation once, but on a loop, they strike me as a bit too much. Part of this is because they are fairly long animations which might not complete by the time the background loading finishes, and I wouldn't want to miss the end of the animation!

[Chris Dermody]

haha true yep - and I sortof agree - the simplest pulsing animation conveys that something's happening while also not making your eye work too hard...

[Simme]

Pulse 1. Love the terminal ones but there is too much going on for a loading indicator. I would probably ask “why don’t you put all those cpu cycles into loading instead of wasting them on playing this indicator animation” - even if I know that it makes no sense. Good job though! All are 👍🏻💪🏻