6 ms·

The only good spinner (and don't forget to include something for screen readers[1]): <progress></progress> Works in every browser, and out-of-the-box is vis

The only good spinner (and don't forget to include something for screen readers[1]): <progress></progress> 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/progress#describing_a_particular_region https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pr...

duxup 3y ago
Except it looks like a progress bar that isn't actually indicating progress ... that seems off to me.
- deathanatos 3y ago
  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.)
  - duxup 3y ago
    I agree that it is a common pattern. I just find it off. Also awkward to use as a horizontal bar to show progress has to be somewhat wide, usually way wider than a spinner. The lying thing is an issue, but I don't see much difference between a bar lying and a bar that ... by design is not a progress bar / not telling the truth?
eddd-ddde 3y ago
What about aria-busy? I love how picocss approaches spinners.
electroly 3y ago
> 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 <progress>. 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.
- deathanatos 3y ago
  Same on macOS … and wow is it animating at a really low frame rate.

duxup 3y ago

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

deathanatos 3y ago
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.)
- duxup 3y ago
  I agree that it is a common pattern. I just find it off. Also awkward to use as a horizontal bar to show progress has to be somewhat wide, usually way wider than a spinner. The lying thing is an issue, but I don't see much difference between a bar lying and a bar that ... by design is not a progress bar / not telling the truth?

eddd-ddde 3y ago

What about aria-busy? I love how picocss approaches spinners.

electroly 3y ago

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

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