6 ms·

Please fix your spinner

52 points by dimitropoulos 3y ago

geerlingguy 3y ago
Tangential pet peeve: when a "fluid" spinner spins slightly off axis.
- chrismorgan 3y ago
  Yeah, this is what I expected it to be about.
- emptysea 3y ago
  GitHub's Pull Request status checks suffer from this Somewhat amusing, a little detail missing
- RedShift1 3y ago
  I'm glad even big companies struggle with centering things, which tells you how hard it really is :')
khana 3y ago
[dead]
deleted 3y ago
[deleted]
timbritt 3y ago
Don’t tell me what to do.
- drewcoo 3y ago
  Well sit down and listen: that's entirely troll-bait!
Retr0id 3y ago
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 https://retr0.id/stuff/spinner.html
- tkzed49 3y ago
  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?
  - judge2020 3y ago
    The right one should be fluid by design, ie. the image is a single curve teardrop-esque stroke and not segmented.
- bobbylarrybobby 3y ago
  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.
- webstrand 3y ago
  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.
  - 3y ago
userbinator 3y ago
"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.
- tkzed49 3y ago
  Surprising, I figured this would be CSS animations. edit: it is, it's just also a React app
  - jackmoore 3y ago
    lol, the nerve
- runlevel1 3y ago
  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.
AndrewPGameDev 3y ago
I was looking at https://css-tricks.com/single-element-loaders-the-spinner/ 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.
- bbunix 3y ago
  I just pop up the text "Loading..."
  - owl57 3y ago
    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.
    - yowzadave 3y ago
      Unfortunately many apps get stuck in the “loading” state—the fact that the loader is animating does not mean it is not stuck!
      - owl57 3y ago
        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).
seba_dos1 3y ago
> You need to enable JavaScript to run this app. Please fix your webpage.
claytongulick 3y ago
I would just be happy if everyone would fix the background transparency of spinners.
muppetman 3y ago
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.
- viraptor 3y ago
  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...
  - muppetman 3y ago
    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.
- burnished 3y ago
  I notice you don't justify your position that those people 'get in the sea'. Lets find you a swimsuit, maybe a floaty?
  - muppetman 3y ago
    Ha! Fair point - guilty of complaining about the very thing I did.
yawnxyz 3y ago
I thought they would call out off-axis spinners... so many can be found on products by large companies like Microsoft. Ugh
tommoor 3y ago
I've literally never seen the one on the right that the author was annoyed enough about to create an entire website?
logicalmonster 3y ago
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?
- duxup 3y ago
  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.
- drewcoo 3y ago
  > 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.
  - wizofaus 3y ago
    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.
c22 3y ago
Better yet don't use a spinner at all. Consider delivering actual information to your users and strive to eliminate "loading" time.
fwlr 3y ago
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=spin https://fontawesome.com/icons/loader?f=classic&s=solid&an=sp... vs Pulsing (correct) https://fontawesome.com/icons/loader?f=classic&s=duotone&an=spin-pulse&sc=%231E3050 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=spin https://fontawesome.com/icons/spinner?f=classic&s=solid&an=s... and pulsing https://fontawesome.com/icons/spinner?f=classic&s=solid&an=spin-pulse 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=spin-pulse&sc=%231E3050 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=solid&an=spin https://fontawesome.com/icons/spinner-third?f=classic&s=soli... / duotone spinning (correct) https://fontawesome.com/icons/spinner-third?f=classic&s=duotone&an=spin&sc=%231E3050 https://fontawesome.com/icons/spinner-third?f=classic&s=duot..., vs solid pulsing (incorrect) https://fontawesome.com/icons/spinner-third?f=classic&s=solid&an=spin-pulse https://fontawesome.com/icons/spinner-third?f=classic&s=soli... / duotone pulsing (incorrect) https://fontawesome.com/icons/spinner-third?f=classic&s=duotone&an=spin-pulse&sc=%231E3050 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.”
- fwlr 3y ago
  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!
Dalewyn 3y ago
I will happily point out Windows says No to both of them and goes straight down the middle.
duxup 3y ago
I don’t like the 8 dot spinner when it is small. It is hard to see. When it is large it’s fine.
causality0 3y ago
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.
deleted 3y ago
[deleted]
throwaway290 3y ago
Far worse is when spinner axis is off center... Plagues every website.
ChrisArchitect 3y ago
(2020)
dzek69 3y ago
Please fix your accessibility https://i.imgur.com/POLlQnR.jpg https://i.imgur.com/POLlQnR.jpg Two images, few lines of text - yeah, let's make it a JavaScript only app!
- wizofaus 3y ago
  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.)
clearleaf 3y ago
Back in my day websites didn't have loading screens. Now that computers are way faster they somehow do.

52 points by dimitropoulos 3y ago

geerlingguy 3y ago

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

chrismorgan 3y ago
Yeah, this is what I expected it to be about.
emptysea 3y ago
GitHub's Pull Request status checks suffer from this Somewhat amusing, a little detail missing
RedShift1 3y ago
I'm glad even big companies struggle with centering things, which tells you how hard it really is :')

khana 3y ago

[dead]

deleted 3y ago

[deleted]

timbritt 3y ago

Don’t tell me what to do.

drewcoo 3y ago
Well sit down and listen: that's entirely troll-bait!

Retr0id 3y ago

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 https://retr0.id/stuff/spinner.html

tkzed49 3y ago
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?
- judge2020 3y ago
  The right one should be fluid by design, ie. the image is a single curve teardrop-esque stroke and not segmented.
bobbylarrybobby 3y ago
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.
webstrand 3y ago
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.
- 3y ago

userbinator 3y ago

"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.

tkzed49 3y ago
Surprising, I figured this would be CSS animations. edit: it is, it's just also a React app
- jackmoore 3y ago
  lol, the nerve
runlevel1 3y ago
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.

AndrewPGameDev 3y ago

I was looking at https://css-tricks.com/single-element-loaders-the-spinner/ 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.

bbunix 3y ago
I just pop up the text "Loading..."
- owl57 3y ago
  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.
  - yowzadave 3y ago
    Unfortunately many apps get stuck in the “loading” state—the fact that the loader is animating does not mean it is not stuck!
    - owl57 3y ago
      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).

seba_dos1 3y ago

> You need to enable JavaScript to run this app. Please fix your webpage.

claytongulick 3y ago

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

muppetman 3y ago

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.

viraptor 3y ago
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...
- muppetman 3y ago
  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.
burnished 3y ago
I notice you don't justify your position that those people 'get in the sea'. Lets find you a swimsuit, maybe a floaty?
- muppetman 3y ago
  Ha! Fair point - guilty of complaining about the very thing I did.

yawnxyz 3y ago

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

tommoor 3y ago

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

logicalmonster 3y ago

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?

duxup 3y ago
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.
drewcoo 3y ago
> 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.
- wizofaus 3y ago
  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.

c22 3y ago

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

fwlr 3y ago

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=spin https://fontawesome.com/icons/loader?f=classic&s=solid&an=sp... vs Pulsing (correct) https://fontawesome.com/icons/loader?f=classic&s=duotone&an=spin-pulse&sc=%231E3050 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=spin https://fontawesome.com/icons/spinner?f=classic&s=solid&an=s... and pulsing https://fontawesome.com/icons/spinner?f=classic&s=solid&an=spin-pulse 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=spin-pulse&sc=%231E3050 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=solid&an=spin https://fontawesome.com/icons/spinner-third?f=classic&s=soli... / duotone spinning (correct) https://fontawesome.com/icons/spinner-third?f=classic&s=duotone&an=spin&sc=%231E3050 https://fontawesome.com/icons/spinner-third?f=classic&s=duot..., vs solid pulsing (incorrect) https://fontawesome.com/icons/spinner-third?f=classic&s=solid&an=spin-pulse https://fontawesome.com/icons/spinner-third?f=classic&s=soli... / duotone pulsing (incorrect) https://fontawesome.com/icons/spinner-third?f=classic&s=duotone&an=spin-pulse&sc=%231E3050 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.”

fwlr 3y ago
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!

Dalewyn 3y ago

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

duxup 3y ago

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

causality0 3y ago

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.

deleted 3y ago

[deleted]

throwaway290 3y ago

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

ChrisArchitect 3y ago

(2020)

dzek69 3y ago

Please fix your accessibility https://i.imgur.com/POLlQnR.jpg https://i.imgur.com/POLlQnR.jpg Two images, few lines of text - yeah, let's make it a JavaScript only app!

wizofaus 3y ago
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.)

clearleaf 3y ago

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