DEV Community

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

Which dev.to loading GIF do you prefer?

Chris Dermody on August 01, 2019

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 actua...
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

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

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

Collapse
 
simme profile image
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 šŸ‘šŸ»šŸ’ŖšŸ»

Collapse
 
chrisallnutt profile image
Chris Allnutt

Loading or Pulse1 . I don't like the npm inclusion in the others on a platform meant to discuss any number of stacks.

Collapse
 
rpalo profile image
Ryan Palo

Pulse 1 is my favorite. Not a huge fan of the npm run ones, but the "loading" one is pretty good too!

Collapse
 
oddward profile image
Mugtaba G

I really like NPM RUN v2, I like the smooth continuity and readability, plus it's very relatable~

I see that you were considering some minimalistic/simple ideas with the pulses & whatnot. Here's an idea: why not use cursors? I feel like cursors would be the most widely relatable, identifiable and can be simple. You could have for e.g.:

  • a cursor simply blinking at the end of "DEV" (very short loop)
  • a cursor at the end of "DEV" that types ".to" and erases it again
  • something with highlighting &/or editing, maybe writing a tag that's maybe auto-completed by the editor

Either way, really nice work.

Collapse
 
fischgeek profile image
fischgeek

I like the first Loading one or Pulse 1. While npm is clever and gave me a chuckle, I don't think it's appropriate. Unless they are sponsoring or you're promoting them in some way.

Collapse
 
chipd profile image
Chris Dermody

No sponsor or anything no, just what I'm used to using and wanted to try out.

Collapse
 
fischgeek profile image
fischgeek

Still cool nonetheless!

Collapse
 
drbragg profile image
Drew Bragg

Dude, these are awesome! Nice work, very creative. Personally, I like pulse 1 the best but they are super neat. Some of the other ideas people have commented about sound awesome. I can't wait to see what else you build.

Collapse
 
walkhard13 profile image
Phillip Smith

The first one - Loading. I don't like the pulse style in general and the npm run ones are suggest DEV is platform specific or has preference towards a particular platform.

Collapse
 
keltroth profile image
Django Janny

My favorite one is "Phase One". It's simple, yet efficient, and not too quick compared to "Phase Two".

Collapse
 
awwsmm profile image
Andrew (he/him)

Pulse 1, for sure

Collapse
 
felicianotech profile image
Ricardo N Feliciano

The others are very creative but pulse 1 feels the best.

Collapse
 
michelemauro profile image
michelemauro

The Loading one.

The npm ones are too much tech-specific, and the Pulse ones seem quite plain. The V-to-command prompt is brilliant!

Collapse
 
steveblue profile image
Stephen Belovarich

The first option but without LOADING. Just dots please. It still conveys the message.

Collapse
 
scrabill profile image
Shannon Crabill

Pulse 1. It's so seamless.

Collapse
 
weswedding profile image
Weston Wedding

I like a the speed of Pulse 2 but with the frames of Pulse 1! I can almost hear the dance music beat but the reset/loop point feels harsh to me.

Collapse
 
paulc_creates profile image
Paul Caoile

I go with the first one. No doubt.

Collapse
 
erhankilic profile image
Erhan KılıƧ • Edited

First one is great. I don't like the npm run versions.

Collapse
 
baso53 profile image
Sebastijan Grabar

Pulse 1 is the most eye comforting, but I got to say that it reminds me a little too much of the facebook loading spinner.

Collapse
 
ajayadav09 profile image
ajayadav09

Loading Icon, the first one. Although would prefer a cleverer animation instead of the loading text

Collapse
 
sur0g profile image
sur0g

Pulse 1

Collapse
 
mike_hasarms profile image
Mike Healy

Pulse 1 is objectively the best

Collapse
 
mxoliver profile image
Oliver

I like pulse 1 the best, I would love NPM run v1 because I think it's super clever but it's a bit too fast for me so it ends up being a bit dizzy.

Collapse
 
anwar_nairi profile image
Anwar • Edited

Definitively the first one: loading!

Clever way to swap the V to make it look like the command line invite!

Collapse
 
stephencweiss profile image
Stephen Charles Weiss

Could you make Loading... just the > and the ... ? Might like that :)

Collapse
 
dansilcox profile image
Dan Silcox

I like the first one or the pulsing dev 1 - now we just need a real dev.to CLI tool... šŸ˜‚

Collapse
 
mememe profile image
mememe

Definitely 1

I also like it because it looks like a generic loader.

Collapse
 
askeroff profile image
Javid Asgarov

Pulse 1 or 2. All others are a bit too much, maybe.

Collapse
 
tiefenb profile image
Markus Tiefenbacher

Pulse 2

Collapse
 
turnonsync profile image
Ahmad Shahzad

Too fast; eyes hurt. Pulse 1 is good.

Collapse
 
missamarakay profile image
Amara Graham

Pulse 1, but they all look awesome!

Collapse
 
osde8info profile image
Clive Da

loved it so much i cloned it

Collapse
 
paul_melero profile image
Paul Melero

They are great but could use a little bit more of "easing". Seem too linear ;)

Collapse
 
chipd profile image
Chris Dermody

Not a bad idea!

Collapse
 
cullophid profile image
Andreas MĆøller

You should listen to your lady friend... Obviously!

Collapse
 
tekgadgt profile image
Ryan McGovern

Pulse 1 looks the best IMO.

Collapse
 
jwkicklighter profile image
Jordan Kicklighter

Pulse 1 is what I'd prefer in an app, but I love the creativity of the rest

Collapse
 
rwkyyy profile image
RwkY

The loading one, is clean and accurate.

Collapse
 
anthofo profile image
Anthony

Pulse 2 :D

Collapse
 
firstclown profile image
Joe Erickson

I like the first LOADING... icon, but that could get distracting fast. The pulse is very easy on the eyes and unobtrusive. Definitely the first pluse. The faster one causes me some anxiety.

Collapse
 
chipd profile image
Chris Dermody

Haha yeah I feel that anxiety alright! :D

Collapse
 
vimmer9 profile image
Damir Franusic

Pulse 1

Collapse
 
jacoby profile image
Dave Jacoby

Also fond of the Pulses.

Collapse
 
havarem profile image
AndrƩ Jacques

Pulse 1.

Collapse
 
deathshadow60 profile image
deathshadow60

Loading... GIF... what is this, 1997?

Isn't this HTML and CSS' job now? ESPECIALLY given the simplicity of all the one's shown?

Collapse
 
chipd profile image
Chris Dermody

Sure, it could be built with HTML and CSS, I guess I chose the word "GIF" as it's the most universally understood term, especially for developers who aren't web developers.

I had all the intentions of building this in HTML and CSS when you guys voted for the best one, like I did in this post here, but just haven't had the time yet :(

Collapse
 
lukeocodes profile image
@lukeocodes šŸ•¹šŸ‘Øā€šŸ’»

"Loading..." is my fave!

Collapse
 
sivaraam profile image
Kaartic Sivaraam

I prefer the "Pulse 1" animation as I find it less intrusive and elegant. "Pulse 2" is a bit too fast.

The text in the other GIFs also seem to moving a bit fast, at least for me.

Collapse
 
cmario92 profile image
cmario

pulse 1 and npm run dev(this one is amazing!) āœŒļø

Collapse
 
joshuarose profile image
Joshua Rose

What about rotating the DEV to show the stems of the E then pan until they are ellipsis.

Collapse
 
fabasoad profile image
Yevhen Fabizhevskyi

Pulse 1 for sure

Collapse
 
theague profile image
Kody James Ague

Pulse 1

Collapse
 
bugsysailor profile image
Bugsy Sailor

Pulse 1.

The least amount of strain on the eye while still communicating something is in progress. I think it could be slowed a bit more yet.

Collapse
 
waylonwalker profile image
Waylon Walker

So freaking creative!! Npm v2 is great but needs more diversity.

npx
pipx
gem
cargo
apt
yum
...

Collapse
 
ctrleffive profile image
Chandu J S

Pulse 1

Collapse
 
herelistenrelax profile image
James Ryan

npm 2!

Collapse
 
athulmuralidhar profile image
Athul Muralidhar

pulse pulse PULSE !

Collapse
 
dana94 profile image
Dana Ottaviani

pulse 1 or npm run dev 2.