CSS Loaders and Spinners

by 5vforest • 13 years ago

70 22 13 years ago

danboarder• 13 years ago

Do they come with a "Skip Intro..." button?

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.

EthanEtienne3• 13 years ago

Exactly, I just had to rant about that. Again though, cool CSS examples, but used for a very wrong task.

xauronx• 13 years ago

So, you don't see any valid uses for a loading animation?

pohl• 13 years ago

What's your alternative? When the user makes a request that will not return immediately, they need some visual feedback, don't they?

CaveTech• 13 years ago

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.

EthanEtienne3• 13 years ago

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

RyanZAG• 13 years ago

Eh? Game Dev is the one field where loading bars are everywhere.

EthanEtienne3• 13 years ago

You try to use a cut scene or other how-to instead. *Good game devs.

RobAley• 13 years ago

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.

dvirsky• 13 years ago

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)

davidjgraph• 13 years ago

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.

kenrikm• 13 years ago

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)

zachlatta3• 13 years ago

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.

hmottestad• 13 years ago

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

zachlatta3• 13 years ago

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.

devcpp• 13 years ago

I don't care how beautiful they look. As a user, I just don't like them. For example, Mega or Blogspot's animations are very nice, but I just get annoyed when I see them. And I don't think I'm alone.

NKCSS• 13 years ago

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

ZeroGravitas• 13 years ago

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.

TeeWEE• 13 years ago

Cool but doesnt work cross browser, so dont use them in your production systems.

jafaku• 13 years ago

Website doesn't work on Firefox 22, Ubuntu 12.04, with Javascript enabled.

CSS Loaders and Spinners

Related Stories