Please fix your spinner | Hacker News Reader

Please fix your spinner

pleasefixyourspinner.com

52 pointsdimitropoulos50 comments

This webpage doesn't provide any reasoning for why one is better than the other.

I think I prefer the one on the left, but if I happened to be of the opposite opinion, this page would not have changed my mind.

Edit: I'm curious what they'd think of my design[1], which is simultaneously "animated in a pulsing fashion" and "rotated with a fluid, linear animation". Is this a good design or a bad design, according to their criteria?

[1] https://retr0.id/stuff/spinner.html

Surely someone can do better than this, but the spinning one looks broken to me, as if something snapped and it just began rotating violently. Why do some dots have different shades if not to convey the same motion as the rotation? It might as well be any random image spinning on the page. Maybe it feels like there's a lack of intention?

The right one should be fluid by design, ie. the image is a single curve teardrop-esque stroke and not segmented.

You only need brightness to simulate the illusion of rotation in stationary dots. If the dots are actually rotating then you can just make them all the same brightness. Using two attributes to simultaneously recreate the same effect is overkill and ruins the effect altogether.

I'll speculate that smooth animations like the rotating spinner (right) made for larger gif images due to needing more frames. So historically the pulsing spinner (left) was preferred. You don't want the spinner itself to take very much time to load, either.

Personally I like both, and might pick one or the other as a stylistic choice.

Can't you do the smooth animation with a still image and css?

You can do it now, but "historically" as the parent post qualifies it it wasn't the case.

Personally I like both

If you combine them, you get one where the dots spin slowly, while there's another spinning effect with the colours of the dots themselves.

Are you old enough to remember the <blink> tag?

I think you have to wait until loading is finished.

Completely agree, as evidenced by the fact that the same fontawesome package includes both as an option it feels very wrong to suggest that one is "wrong"

I, personally, prefer the one on the left too but I wouldn't ever say the one on the right is wrong or broken or needs to be "fixed"

I hate these "This is way you do it" people who just assert they're right. For years there was the whole "Never film vertically" and oh look it turns out that it's quite popular to film that way and in fact Tiktok relies on it. (I get WHY people think filming horizontally is better, I agree it is)

The whole "I'm right you're wrong" crowd need to get in the sea.

The "never film vertically" was popular when we didn't live on our phones and most media consumption happened on computer screens. I haven't seen that rule mentioned in a very long time now...

That's my point. People were obsessed with how right they were and turns out after a period of time, they were actually wrong and what they were campaigning against (why?) become the defacto choice.

I clearly remember at least 4 different family members all calling my first mobile phone a "wanker phone" and every single of them carries a mobile these days.

I notice you don't justify your position that those people 'get in the sea'. Lets find you a swimsuit, maybe a floaty?

Ha! Fair point - guilty of complaining about the very thing I did.

"You need to enable JavaScript to run this app."

...so I did, after some contemplation at what this app will attempt to do, and am greeted with a brief amount of static text and two animations that could easily be GIFs.

IMHO, having to display a spinner at all is usually a symptom of the "modern web". Ironically, this app itself didn't display any while it was loading.

Surprising, I figured this would be CSS animations.

edit: it is, it's just also a React app

lol, the nerve

All the content on the site is bundled in the javascript -- even all the text. The only markup in the html file's body is an empty DIV.

That's ~55 KiB of minified JavaScript (roughly, Act I of Macbeth in size) for a page with 82 words. Modern web development sometimes goes out of its way to be overcomplicated.

Ironically, the animation is all being done with CSS.

I was looking at https://css-tricks.com/single-element-loaders-the-spinner/ to see some other ways of doing spinners, but after seeing that I realized that having fancy spinner loaders just frustrates me. It reminds me of all the time I've spent looking at a spinner and waiting for an app/page/game to load. The fact that a lot of time was put into designing a nice spinner is almost an insult.

I think the optimal spinner might be the simplest possible one, just show something moving/changing to show that the page is still loading.

I just pop up the text "Loading..."

I think I've seen this animated (... -> -> . -> .. -> ...), this is quite good. But the animation is important. Without it user can think that the app froze, especially in the world where every other app shows some sort of animation.

Unfortunately many apps get stuck in the “loading” state—the fact that the loader is animating does not mean it is not stuck!

Yeah, works only the other way: the fact that the loader is still means one of two things — either the app is completely stuck or it ignores UI conventions of the last decade (which can be good or bad, depending on domain).

Tangential pet peeve: when a "fluid" spinner spins slightly off axis.

Yeah, this is what I expected it to be about.

GitHub's Pull Request status checks suffer from this

Somewhat amusing, a little detail missing

I'm glad even big companies struggle with centering things, which tells you how hard it really is :')

I thought this was going to be a site about how to get rid of spinners.

Our goal should be to get people to their content quicker, not satiate them with a perfect spinner, right?

I find if I don’t give a bit of a loading indicator that users get suspicious if the action worked or not.

A loading indicator does a nice job of indicating work being done.

> Our goal should be to get people to their content quicker, not satiate them with a perfect spinner, right?

Yes, this.

Every spinner is a band-aid over a bug.

I've dealt with C-suite (typically not engineering!) in tiny startups who were very interested in every detail of their spinners . . . but unwilling to consider the very fact that they needed a spinner to be a problem.

A bug? The reality is there are plenty of times it's simply not feasible to complete a user request instantly (particularly if you're depending on 3rd party services), but it's not likely to take so long you need to redesign the UX to make it clear a background task has been started that will finish later on (in fact some users have real difficulty with such interfaces anyway). Whereas you can always respond to a user action with some instant feedback that indicates work is in progress, and ideally give the user some indication of how long they might have to wait and that the request is still being worked on. I say this having recently developed such a feature - in fact the customer was fine that the requested action might take up to 10 minutes to complete, but their preference was that a modal dialog showing the progress of said task with an explicit warning not to close it should be shown, despite the fact we'd implemented it to allow the dialog to be closed and the app to be fully functional while the task ran. And yes, every effort was made to reduce the time needed to complete the request but ultimately we were constrained by 3rd party libraries, the large amount of processing needed (image processing on very large documents, well over 1gb) and the fact the customer was unwilling to pay for more compute resources.

Better yet don't use a spinner at all. Consider delivering actual information to your users and strive to eliminate "loading" time.

> You need to enable JavaScript to run this app.

Please fix your webpage.

I've literally never seen the one on the right that the author was annoyed enough about to create an entire website?

Please fix your accessibility

https://i.imgur.com/POLlQnR.jpg

Two images, few lines of text - yeah, let's make it a JavaScript only app!

Why is requiring javascript an accessibility issue? Whether fully rendering the page requires client-side script execution really shouldn't affect whether the resulting DOM can be presented to users with various accessibility needs. OTOH a screenshot is almost never a good way to present information if you care about accessibility... (or searchability, device-neutrality etc. etc.)

I would just be happy if everyone would fix the background transparency of spinners.

The spinner on the right is better simply because 90% of users have already been trained to have a visceral hatred reaction to the spinner on the left. I would rather look at a pulsating orifice than the left spinner.

I thought they would call out off-axis spinners... so many can be found on products by large companies like Microsoft. Ugh

Back in my day websites didn't have loading screens. Now that computers are way faster they somehow do.

I will happily point out Windows says No to both of them and goes straight down the middle.

I don’t like the 8 dot spinner when it is small. It is hard to see.

When it is large it’s fine.

Far worse is when spinner axis is off center... Plagues every website.

The spinner on the page is definitely designed to pulse; it is segmented and each segment has varying contrast (via brightness) to create the illusion of rotation.

I don’t think segmentation alone is enough to justify pulsing rather than spinning. Compare for example two variants of a Font Awesome spinner:

Spinning (correct) https://fontawesome.com/icons/loader?f=classic&s=solid&an=sp... vs Pulsing (correct) https://fontawesome.com/icons/loader?f=classic&s=duotone&an=...

This other example is a little harder. Both spinning https://fontawesome.com/icons/spinner?f=classic&s=solid&an=s... and pulsing https://fontawesome.com/icons/spinner?f=classic&s=solid&an=s... seem slightly incorrect (though adding in visual contrast between segments makes pulsing seem much more correct: https://fontawesome.com/icons/spinner?f=classic&s=duotone&an...)

And here is a a third spinner from FontAwesome that always looks correct spinning and never looks correct pulsing. Solid spinning (correct) https://fontawesome.com/icons/spinner-third?f=classic&s=soli... / duotone spinning (correct) https://fontawesome.com/icons/spinner-third?f=classic&s=duot..., vs solid pulsing (incorrect) https://fontawesome.com/icons/spinner-third?f=classic&s=soli... / duotone pulsing (incorrect) https://fontawesome.com/icons/spinner-third?f=classic&s=duot...

My conclusion is that it’s clear that pulsing is sometimes much more correct than spinning, but it depends on the icon you’re using, it’s not as simple as “it’s segmented” or even “it’s segmented and the segments have visually contrasting brightness”.

My advice would be “Although they are called spinners, spinning may not be the best animation for them, there is also pulsing to consider. Whenever you pick a loading animation, compare ‘spinning’ to ‘pulsing’ to see which one looks more correct.”

To add on to this, it can in fact be much more complicated than both styles put together and still look correct if done well. If you’re on iOS Safari, try scrolling to the top and then slowly pulling the page down (the universal iOS Safari gesture for refreshing).

It starts out not spinning and each segment fades in to full opacity one by one, creating an impression of the spinner “filling up” as you get closer to completing the gesture. The moment you complete the gesture, the fully solid spinner starts spinning, then the spinning slows while some of the segments start fading, and the fade starts pulsing as well. By the time the spinning has stopped, the pulsing is in full effect. When the action completes, all segments quickly return to full opacity and the spinner quickly begins spinning once again, and then (while spinning) the whole icon both fades and shrinks until it disappears.

That is an incredibly complex and incredibly well-executed spinner animation!

(2020)

Don’t tell me what to do.

Well sit down and listen:

that's entirely troll-bait!

Reply on news.ycombinator.com