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:
Oldest comments (95)
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. :)
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.
Agreed 100%, with a preference for Pulse 1 because Pulse 2's animation seems too quick.
Hi
I hope you're well. I found you in Dev.to. I'm interested in exploring a potential business collaboration with you, as I believe our combined efforts could be mutually beneficial.
Please let me know if you'd be open to discussing this further.
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?
Even better idea with the blinking cursor! This connects even more to the developmer-terminal-feeling.
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 :)
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!
I'm definitely drawn to the loading and pulse 1...I think the sweet spot might be somewhere between or combined.
🍻
Such a fan of this one!!
npm run DEV v3
Great work! I think the first one looks best!
Thanks! :)
They are great but could use a little bit more of "easing". Seem too linear ;)
Not a bad idea!
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 Loading one.
The npm ones are too much tech-specific, and the Pulse ones seem quite plain. The V-to-command prompt is brilliant!
Pulse 2 :D
You should listen to your lady friend... Obviously!
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...