Live data from Hacker News

LoaderShip – CSS-Only Loaders

loadership.com

41–50 of 65 posts

Re: LoaderShip – CSS-Only Loaders

#42
I've been frequently fascinated by is loading screen UX. How we choose to present loading can have a huge impact on how a customer views a product. For example, if you have a bespoke loading icon, users will tend to think the issue with with your product and not the underlying system. If you use a default system loading icon, they'll blame their phone/OS/wifi.

These days, cutting edge loading UX means placeholders: https://uxdesign.cc/stop-using-a-loading-spinner-theres-some...

Re: LoaderShip – CSS-Only Loaders

#45

The only good spinner (and don't forget to include something for screen readers[1]): Works in every browser, and out-of-the-box is visually consistent with the rest of the system. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pr...

> visually consistent

In Chrome on Windows it shows a back-and-forth bouncing progressbar that is not at all similar to the system's indeterminate progress bar styling. I've never seen this used elsewhere, other than here in this Chromium implementation of . It's (mostly*) not objectionable but it definitely doesn't blend in.

* Suffers from a newbie trap: if you're going to bounce back and forth, you need to make sure there's a frame where the bouncer is all the way at the end of the control before the direction switches. This implementation doesn't, so sometimes the moment when it hits the edge of the progressbar happens between frames, so you miss the actual bump which looks disconcerting.

Re: LoaderShip – CSS-Only Loaders

#46
post #3

I wish loaders would provide some feedback on what is going on. So often, I look at a loader and think "How long will it take? Is it actually still doing something? Or should I try to reload the page?". Also, I often wonder why developers put tools like this on an extra domain instead of just putting it on a page or subdomain on their personal domain. Is there a reason for this that I am missing?

At least as far as the web goes:

I agree generally but things like "How long should it take?" is more about your internet speeds / consistency, or very odd unforeseen issues on the back end, and frankly there's no amount of goofing around with even more code on your computer to determine local internet issues ... will tell me any number that makes sense.

The only time calculating "how long" is under ideal circumstances (and at that point nobody cares) or say very predictable large back end workloads. As soon as things get variable, I can't give you a reasonable number.

Sorry if that is a bit of a jumble of words and ideas there, I'm actually taking a break from troubleshooting this exact kind of issue. Customer has varying weird internet issues, wants to know "how long" ... bro wat?

Re: LoaderShip – CSS-Only Loaders

#47

The only good spinner (and don't forget to include something for screen readers[1]): Works in every browser, and out-of-the-box is visually consistent with the rest of the system. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pr...

> visually consistent In Chrome on Windows it shows a back-and-forth bouncing progressbar that is not at all similar to the system's indeterminate progress bar styling. I've never seen this used elsewhere, other than here in this Chromium implementation of . It's (mostly*) not objectionable but it definitely doesn't blend in. * Suffers from a newbie trap: if you're going to bounce back and forth, you need to make sur…

Same on macOS … and wow is it animating at a really low frame rate.

Re: LoaderShip – CSS-Only Loaders

#48
post #36

The only good spinner (and don't forget to include something for screen readers[1]): Works in every browser, and out-of-the-box is visually consistent with the rest of the system. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pr...

Except it looks like a progress bar that isn't actually indicating progress ... that seems off to me.

Most UI toolkits I've used have a notion of an "indefinite" progress bar. In the past these have sometimes done like a horizontal barber pole animation. In fact, I have memories of the one in Thunderbird doing this; it would be a normal progress bar while the email's data was sent, and transition to an indefinite bar while it awaited the server's response. After all … there's no "max" or "value" to the progress … we're just waiting for a singular response.

Windows, in the glassy Vista era, had a green one that would shimmer & slide a small faded green blob (for lack of a better word) across the bar.

(IMO better than what Explorer did for years, which was to show a definite progress bar, i.e., one with a shaded portion indicating some % completion … and then just lie about it. It would just fill the bar up with an exponential decay towards 100%, but never actually get there … and was really just an animation.)

Re: LoaderShip – CSS-Only Loaders

#50

Lately my internet connection has been ridiculously bad. It made me realise how often UX is ignored for bad connections. One of the things I notice with SPAs is that since the browser navigation does not occur normally, I get no indication from my browser that a link is loading, so the app is completely responsible of adding their own navigation indicators (which is uncommon to see in the wild). Also sort of unrelate…

So much of this is because developers work on high-end systems with a ridiculously fast internet connection (whether at home or work).

It isn't super-hard to fix this, but does take effort/time/money. For example, test on slow devices on slow connections. There are proxies that can throttle and introduce latency, or even let random connections timeout.

There's a catch-22 here though: doing this early in a product's life probably doesn't make sense as it's almost certainly better to focus your efforts on creating the product. But the longer you wait, the harder (== more time-consuming == more expensive) it is -- there's more architecture to change, there's complex page logic that eg didn't account for potential timeouts while doing a callback to validate something entered in a text box is unique, etc.

Post reply on HN