CSS Loaders and Spinners(codepen.io)
codepen.io
CSS Loaders and Spinners
http://codepen.io/collection/HtAne/
8 comments
What's your alternative? When the user makes a request that will not return immediately, they need some visual feedback, don't they?
Issue isn't with the loading feedback, it's that these loaders tend to be gaudy and overly flashy. Many designers these days are moving towards "clean" and "flat" styles, and these loaders are neither.
Exactly, I just had to rant about that. Again though, cool CSS examples, but used for a very wrong task.
So, you don't see any valid uses for a loading animation?
Looks nice, but there seems to be a bug, that after a few seconds, one of the spinners does something it shouldn't do which affects all loaded spinners. The top-left (red bg with 3 white balls) is one of the only ones that still does a part (but now different) animation :)
As they said about Geocities in retrospect, just because you can, doesn't mean you should.
None of these grab and say "I'm a busy waiting spinner". Let's not re-invent trivial things that are the way they are for a reason, I think EthanEtienne has the right idea, working on getting rid of them is the real innovation, not changing the way they look.
None of these grab and say "I'm a busy waiting spinner". Let's not re-invent trivial things that are the way they are for a reason, I think EthanEtienne has the right idea, working on getting rid of them is the real innovation, not changing the way they look.
I don't know about you, but I think this one looks pretty fantastic http://codepen.io/jshawl/pen/IFxBK. Depends on the aesthetic of the website though.
While they look cool am I the only one who thinks that if you need to display a "Loading" spinner you should rethink what it is you're doing? Maybe I'm just traumatized from the surge of Flash based sites back in the day (thank god flash is on the way to the grave)
Loading doesn't have to mean "this page is loading a huge pile of crap that you don't want". It could simply mean "you don't need to press that button again, we really have sent your request, it's just taking a second".
Examples that are useful:
- Credit card processing (always seems to take 2-3 seconds)
- Big database query (searching maybe. But don't do this in regular webapps, just in those where the user expects the query to take some time, like in enterprise apps).
- Uploading or downloading a small file that takes a few seconds (instead of a progress bar that is misleading on small files)
- Buffering audio/video
Examples that are useful:
- Credit card processing (always seems to take 2-3 seconds)
- Big database query (searching maybe. But don't do this in regular webapps, just in those where the user expects the query to take some time, like in enterprise apps).
- Uploading or downloading a small file that takes a few seconds (instead of a progress bar that is misleading on small files)
- Buffering audio/video
Finally! Someone who has the same opinion on this as me! I can see where spinners can be useful, but we need to remember that we killed Flash for a reason.
What's wonderful about the web is the ease of distribution. As I see more and more spinners, I'm becoming increasingly worried that the standards will become the new Flash. For an example of a website that bothers the hell out of me with it's loading is Blogspot.
What's wonderful about the web is the ease of distribution. As I see more and more spinners, I'm becoming increasingly worried that the standards will become the new Flash. For an example of a website that bothers the hell out of me with it's loading is Blogspot.
[deleted]
Years ago, in the early days of Ajax, I made a spinner for a web app, and contributed it to some guy's collection. I'm not even a designer and it's badly made and a bit wobbly, but I've seen it since so many times, in so many websites and collections, it's funny. This collection has some variation of it, too, I think. hehe. But it has ones that are a LOT nicer. (this is my spinner BTW http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/20-0.gif . I can always tell by the way it's misaligned and wobbling)
Really nice looking, I actually like Marco Barría's one (not as a spinner though).
Whenever you see a spinner or loading icon, you failed in UX design. Most of these feel slow and just plain wrong, they are pretty though, and the CSS is pretty awesome.
Use content progression instead of these damn spinners or loaders. Game dev's learned this a long time ago.
- my worthless 2c rant
Whenever you see a spinner or loading icon, you failed in UX design. Most of these feel slow and just plain wrong, they are pretty though, and the CSS is pretty awesome.
Use content progression instead of these damn spinners or loaders. Game dev's learned this a long time ago.
- my worthless 2c rant
Its not always about content downloading. Sometimes some data is being processed or a long query run or an external resource being fetched, and there is no content to show.
Eh? Game Dev is the one field where loading bars are everywhere.
You try to use a cut scene or other how-to instead. *Good game devs.
Those cut scenes just turn into long elevator rides.
I'd rather have a loading screen with a bit of interesting info about the game that I might find useful. Borderlands 2 does this but my SSD loads the levels so fast I usually can't read them.
I'd rather have a loading screen with a bit of interesting info about the game that I might find useful. Borderlands 2 does this but my SSD loads the levels so fast I usually can't read them.
I see a thin white outline of the boxes used to animate these when the background is dark, on Firefox/Ubuntu.
It's not visible in the previews, but is when you click through.
It's not visible in the previews, but is when you click through.
Cool but doesnt work cross browser, so dont use them in your production systems.
Website doesn't work on Firefox 22, Ubuntu 12.04, with Javascript enabled.
In all seriousness, they are beautiful but raise the concern that we are back to the days of Flash-style loaders before users get to see content.