Panic Inc.

Panic Blog

Copywriter: Cabel.

Spinner Rage

Did you know the French have over 300 words for “ennui”? It’s true. Similarly, a designer has over 14,000 words for nit-picky things that annoy them that nobody else in the world cares about. In this case, 300 words.

Hooray! I’ve found a new thing you won’t care about! Prepare to have your eyebrows melted.

Designers, do you see anything wrong with this spinner I found on the web?

It’s pretty subtle. Look close! The problem is specifically with frame five:

All the segments should get lighter as the spinner rotates. But, in frame five, the trailing segments of the spinner get darker, for a single frame. (I think the designer accidentally left two layers on at once.)

Now look at that 16 x 16 sample again. You’ll see a brief, dark flash at the very top of the spinner, once per rotation. And, if you’re anything like me, you’ll never, ever be able to un-see it. Ever.

If I were to find this on just one website, I’d be all, “Huh, that’s pretty annoying!”. But here’s how this thing reached a level 8 nightmare: I started seeing this flashy goofball spinner everywhere. Everywhere!

Alaska Airlines. The Associated Press. Google. The St. Petersburg Times.

I was beginning to think I was losing my mind. Then I Googled for “spinner creator”, and… mystery solved. So:

Dear Ajaxload.info,

Please fix frame 5 of your “Indicator” spinner, because everyone on the internet uses it.

Love,
Cabel

For you, Panic reader, here’s my clean  16×16 Spinner.psd [6k] ready to be colored and gif’d. Enjoy!

PS: If you’re drawing a spinner like Apple’s, take heed: the inner caps are rounded, not just the outer caps.
PPS: And don’t get me started on this kind of business:

HOW HARD WOULD IT BE TO AAAhhhhhh
Posted at 10:59 am 51 Comments

My thoughts exactly.

Trevor Price

10/18/2010 11:15 AM

Do you own an iPhone 4? Next time you turn it off look close at the shutdown spinner. It’s not high resolution for the retina display. I feel much better now that I vented about that. I think I’ll go post it on twitter as well. Thanks!

@trevorep

Cabel I exported that PSD and am still seeing some glitches? http://meltwizard.com/stuff/spinner.gif

Scott McMillin

10/18/2010 11:21 AM

Haha, as soon as I saw your tweet I knew what you were talking about. I manually fixed that spinner myself, as well.

David Stewart

10/18/2010 11:22 AM

I feel your pain. Here at Webtrends we’ve got spinners everywhere (we call them throbbers for some reason only known to our front end architect). I’ve got 16×16, 11×11, 32×32 and many other random sizes. We actually made our own version using a filmstrip method with a PNG (for transparency). I spent DAYS struggling to perfect it.

Eventually, I made them in illustrator although the exact method wasn’t documented. In the end, the easier solution was to just make our data faster. Email me and I’ll send you the source.

Brian Bates

10/18/2010 11:25 AM

The manhole cover made me laugh. Great post for a monday!

Andrew Poole

10/18/2010 11:32 AM

>> Do you own an iPhone 4? Next time you turn it off look close at the shutdown spinner. It’s not high resolution for
>> the retina display. I feel much better now that I vented about that. I think I’ll go post it on twitter as well. Thanks!

It also has a similar glitch to the spinner in Cabel’s original post. Look at the segment in the North-North-West position. It stays brighter than the rest of the spinner all the time.

Thanks Cabel. Now I’ll always be seeing these glitches in spinners! :)

Chriztian Steinmeier

10/18/2010 11:34 AM

Oh man, this is the stuff. Manhole kills me :-)

Richard Kimber

10/18/2010 11:38 AM

Love it, thought I was the only one. Rich

Ben Cochran

10/18/2010 11:47 AM

I stopped using that very spinner for that very reason. Also, it’s all jaggie and just generally doesn’t quite look right.

limeonaire

10/18/2010 12:01 PM

Yeah, I always thought that one looked too jaggy anyway. But great catch on the messed-up frame.

Garrett Murray

10/18/2010 12:17 PM

This has bothered me for YEARS. Thank you for pointing it out. Also, your closing sentence is exactly what I hear in my head every time I see something like that manhole situation.

The YouTube spinner (the one that shows up while it’s initially loading a video) also has an obvious defect, which you have to be blind and in a hurry to let slip through. Except this spinner is seen by millions and millions every day. Go load a video and look for yourself.

Alaska Airlines calls it interstitial-animated-dots.gif. :D I think someone was having a laugh.

Eric Peacock

10/18/2010 1:02 PM

I’m sort of in the camp of using any spinner/throbber that doesn’t copy the Apple one just because when Apple does something it actually feels like it’s their brand no matter where it shows up. Of course Panic makes Apple apps so it’s probably arguable that they should use the native OS spinner for web sites.

I suppose if one was lazy and geeky at the same time they could simply snag the frame source TIFFs from the OSX system package and use that…

Josh Monroe

10/18/2010 1:04 PM

Also, would owners of the older Honda CRVs please make sure that you put your spare tire cover back on straight. It drives my wife nuts.

Hi Panic,

I followed this post to the Ajaxload.info creator who I know very well.
The web is such a small place :).

Have fun boring yourself as much ;).
Cheers from France.

Julian Schrader

10/18/2010 1:24 PM

Epic.

Oh, and thanks for posting this, Cabel. It’ll make me mad as well now.

I noticed the glitch too! And I’m not even a designer! I’m just OCD.

Actually, manhole covers are heavy. Really heavy. So heavy that not many people are going to bother putting them on straight. And besides, they’re main design requirement is to not fall back down the hole, thus they’re circular. They should just take pains to never paint them is all.

Paul Mison

10/18/2010 2:48 PM

Cabel should probably not visit http://misplacedmanholecovers.co.uk/ despite its nice, understated presentation.

wow, I absolutely agree.
but much worse than that are colored gif-spinners with white alpha-transparency fill on non-white backgrounds.

urgh.

Andy Couch

10/18/2010 3:45 PM

As someone who is a stickler for details, are you bothered as much as I am about the “official” feed icon (http://www.feedicons.com/)? The way the two lines aren’t symmetrically aligned with the dot drives me crazy. It was correct in the original 14×14 icon that Mozilla created, and actually still is correct in that one size on the site, but all other sizes have the asymmetrical lines! It’s maddening!

Derek Anderson

10/18/2010 4:26 PM

I whipped this together to get a deep feeling of the spinner situation: http://mediaupstream.com/sandbox/spinners

Rob Russell

10/18/2010 8:10 PM

Thank you very bloody much. Now I’M going to see this all of the time.

Enough to make a man want to go and sit on the beach and forget all about computers…

:)

Burger Party

10/19/2010 1:58 AM

See these mistakes all over the place, YouTube had one if I remember rightly (which you see all time because their Flash player gets buggier every revision and now barely resumes playing without re-clicking the timeline play head) and it’s like nails on a chalkboard every time I see it.

Photoshop CS5 wait cursor spinner bugs me as well because spinners are clearly meant to be a black to alpha transition and theirs is a weird black to solid white transition to show up on black backgrounds… but it looks so wrong I wish they’d just done a modern version of the OS9 BMW logo spinner

Cabel, that is classical, now I am sitting here trying to explain to my wife, who naturally has her eyebrows raised already , what is so funny!

Derek, your page (http://mediaupstream.com/sandbox/spinners) makes it so clear—the whole thing flashes. Nice.

Guys, you’re the best :)

And the fact that the spinner looks a bit like a blurry pixel mess, particularly on a white background, doesn’t irk you?

Biberkopf

10/20/2010 4:37 PM

The devil’s in the detail … and if you run it backwards you’ll actually get a glimpse of him. ;-D

Just saw the exact same issue on a spinner yesterday!
Sooo great to see that I am not alone!

If Monk cares – we should, too! :)

I’ve met the guy behind the website last week! I’ll try to ping him!

AAAAAAAHHHHHHHH….I DIDN’T NOTICE IT THE FIRST TIME AND THEN I CAME BACK AND NOW IT STICKS IN MY EYE!!! WHY WOULD YOU DO THIS TO ME? I AM YOUR FRIEND!!!

I love that I’m not the only neurotic person on the planet.

I hate you.

Great, now something that would never have annoyed me because I wouldn’t have noticed it does. Everywhere. :(

Oh! My god. You has written a new script for The Big Bang Theory. Bazinga!

Calling my doctor to take a look at my eyes… I need surgery to have it removed from my eyes!! I can´t stop :(

This is why I love Panic.

I’ve seen this spinner before, after you see the stutter of one full rotation, it’s all you see

JaredRDavis

11/6/2010 10:02 PM

Cabel,

I have to say this post made smile more than anything I’ve read all day. I needed the boost :) Cheers.

Thanks,
JaredR

I love that last photo!! HAHAHAHA!! You guys so rock!!

They have this spinner on the videogame Split/Second. It’s everywhere!

Speaking of pixels, is there must the text in this post be so extreeeeeemely fuzzy in Safari 5.0.3?

Uh, yeah, I can’t grammar.

Found another incident on the NS Hispeed website in the Netherlands when you are searching for traintickets.

http://onlineboeken.nshispeed.nl/img/nshispeed//progressbox/progressbox_loader.gif

Thanks to this post, I’m this close to mailing the webmaster since I also cannot un-see it. Ever. Aaargh!

Well, why don’t you just switch to http://preloaders.net instead of ajaxload. It’s gone far ahead of it in this industry

Thanks. I can’t unsee this now. You’ve ruined the internet for me.