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...
For further actions, you may consider blocking this person and/or reporting abuse
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. :)
Agreed 100%, with a preference for Pulse 1 because Pulse 2's animation seems too quick.
Yes!! I prefer the Pulse 1. It is better
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...
If there is one thing I've learned in my years of development work it's that clever is rarely a good thing.
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!
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?
This is why I stopped iterating and wanted to share. Didn't think of this. Lemme see what I can do šš¼šš¼
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 :)
Even better idea with the blinking cursor! This connects even more to the developmer-terminal-feeling.
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!
Such a fan of this one!!
I'm definitely drawn to the loading and pulse 1...I think the sweet spot might be somewhere between or combined.
š»
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?
Interesting! Not very difficult to do given what I've got so far...
The NPM ones are making some assumptions that everyone here is a web dev. :P
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?
I guess
makeis more universalJust 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!
I'd say, npm is specific to npm. There are web developers who use yarn or pnpm as well. :)
The Node Package Manager is, in fact, specific to JavaScript.
Maybe then git clone?
lsrm -rf /gitNope I am not a web dev. I write AI, ML and all that stuff. š
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
npmexclusively is alienating. Maybe if we havenpm,gem,composer,helm, etc; sure.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...
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)
oooh this is nice - good idea!
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" ?
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.
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?
If it's tiny enough you can't make up the command which was entered. But maybe something like
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 šš»šŖš»
Great work! I think the first one looks best!
Thanks! :)
npm run DEV v3
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!
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...
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.:
Either way, really nice work.
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.
Pulse 1 is my favorite. Not a huge fan of the
npm runones, but the "loading" one is pretty good too!Loading or Pulse1 . I don't like the npm inclusion in the others on a platform meant to discuss any number of stacks.
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.
No sponsor or anything no, just what I'm used to using and wanted to try out.
Still cool nonetheless!
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.
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.
My favorite one is "Phase One". It's simple, yet efficient, and not too quick compared to "Phase Two".
Pulse 1, for sure
The others are very creative but pulse 1 feels the best.
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!
The loading one, is clean and accurate.
Pulse 2 :D
Also fond of the Pulses.
Pulse 1.
The first option but without LOADING. Just dots please. It still conveys the message.
Pulse 1. It's so seamless.
I go with the first one. No doubt.
First one is great. I don't like the npm run versions.
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.
Loading Icon, the first one. Although would prefer a cleverer animation instead of the loading text
Pulse 1
Pulse 1 is objectively the best
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.
Definitively the first one: loading!
Clever way to swap the V to make it look like the command line invite!
Could you make Loading... just the > and the ... ? Might like that :)
I like the first one or the pulsing dev 1 - now we just need a real dev.to CLI tool... š
Definitely 1
I also like it because it looks like a generic loader.
Pulse 1 or 2. All others are a bit too much, maybe.
Pulse 2
Too fast; eyes hurt. Pulse 1 is good.
Pulse 1, but they all look awesome!
loved it so much i cloned it
They are great but could use a little bit more of "easing". Seem too linear ;)
Not a bad idea!
You should listen to your lady friend... Obviously!
Pulse 1 looks the best IMO.
Pulse 1 is what I'd prefer in an app, but I love the creativity of the rest
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.
Haha yeah I feel that anxiety alright! :D
Pulse 1
Loading... GIF... what is this, 1997?
Isn't this HTML and CSS' job now? ESPECIALLY given the simplicity of all the one's shown?
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 :(
npm 2!
Pulse 1
pulse 1 and npm run dev(this one is amazing!) āļø
Pulse 1 for sure
Pulse 1
pulse 1 or npm run dev 2.
pulse pulse PULSE !
Pulse 1. Simple, elegant, and does its job
"Loading..." is my fave!
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.
What about rotating the DEV to show the stems of the E then pan until they are ellipsis.
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.
So freaking creative!! Npm v2 is great but needs more diversity.
npx
pipx
gem
cargo
apt
yum
...