DEV Community

Cover image for Which dev.to loading GIF do you prefer?
Chris Dermody
Chris Dermody

Posted on

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 ;)

Which one is best?

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:

Top comments (95)

Collapse
 
sebbdk profile image
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. :)

Collapse
 
justinenz profile image
Justin

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

Collapse
 
tr11 profile image
Tiago Rangel

Yes!! I prefer the Pulse 1. It is better

Collapse
 
chipd profile image
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...

Collapse
 
ludamillion profile image
Luke Inglis • Edited

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

Collapse
 
darksmile92 profile image
Robin Kretzschmar • Edited

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!

Collapse
 
ben profile image
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?

Collapse
 
chipd profile image
Chris Dermody

This is why I stopped iterating and wanted to share. Didn't think of this. Lemme see what I can do πŸ™ŒπŸΌπŸ™ŒπŸΌ

Thread Thread
 
darksmile92 profile image
Robin Kretzschmar • Edited

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 :)

Collapse
 
darksmile92 profile image
Robin Kretzschmar

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

Collapse
 
philnash profile image
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!

Collapse
 
michaeltharrington profile image
Michael Tharrington

Such a fan of this one!!

Collapse
 
chiangs profile image
Stephen Chiang

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

🍻

Collapse
 
256hz profile image
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
Collapse
 
chipd profile image
Chris Dermody

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

Collapse
 
quinncuatro profile image
Henry Quinn

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

Collapse
 
chipd profile image
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?

Collapse
 
quinncuatro profile image
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!

Thread Thread
 
axmrnv profile image
Alexey Mironov

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

Thread Thread
 
quinncuatro profile image
Henry Quinn

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

Thread Thread
 
muhimen123 profile image
Muhimen

Maybe then git clone?

Collapse
 
munizart profile image
Artur Muniz

I guess make is more universal

Collapse
 
v6 profile image
πŸ¦„N BπŸ›‘ • Edited

ls
rm -rf /
git

Collapse
 
muhimen123 profile image
Muhimen

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

Collapse
 
david_j_eddy profile image
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.

Collapse
 
chipd profile image
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...

Collapse
 
gmartigny profile image
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)

Collapse
 
chipd profile image
Chris Dermody

oooh this is nice - good idea!

Collapse
 
nicolus profile image
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" ?

Collapse
 
elmuerte profile image
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.

Collapse
 
chipd profile image
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?

Collapse
 
elmuerte profile image
Michiel Hendriks

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

> make community
Collapse
 
utkarsh profile image
Utkarsh Talwar

Great work! I think the first one looks best!

Collapse
 
chipd profile image
Chris Dermody

Thanks! :)

Collapse
 
quentame profile image
Quentame

npm run DEV v3