Buttons with built-in loading indicators • Hacker News Board

Re: Buttons with built-in loading indicators

#51

Post by medell » Wed, Jun 05, 2013, 6:33 PM UTC

ozh wrote: post #4

very neat, and incidentally made me discover slid.es, what an extremely well made app that is.

Same here, slid.es is brilliant!

I had to learn more before I throw out PowerPoint, so I Googled (which is difficult because of the top level domain in the name, had to search with quotations). http://ltlatnd.wordpress.com/2013/05/20/slid-es-for-lightwei...

TLDNR: Formerly Rvl.io, free tier, commenting. Paid tier at $7/mo has revision history, private slides and offline export.

And no, I don't work or know Hakim :)

Re: Buttons with built-in loading indicators

#52

Post by ultimatedelman » Wed, Jun 05, 2013, 7:24 PM UTC

This is very pretty, but there's no need for a larger, separate JS file. All of this can be handled with CSS and a simple JS command that adds/removes a CSS class on click.

Quick demo: http://codepen.io/ultimatedelman/pen/klDHy

Since you wouldn't obviously use all the effects in this article, just pick the one you would use and have the .loading class effect the correct change.

UPDATE: now with fewer elements. Only HTML element needed to achieve this effect is the button itself :)

Re: Buttons with built-in loading indicators

#53

Post by mcgwiz » Wed, Jun 05, 2013, 7:34 PM UTC

dspillett wrote: post #17

Nice. I like the in-place-with-overlay option particularly, though I can still interact with the other buttons while the overlay is in place which I was not expecting.

Agreed, a nice library overall.

And at first I was impressed by the overlay, especially considering the novel implementation. However, after a little thought and setting that novelty aside, I think that effect is broken. It's simply not at all conventional for a fully masked page to retain interactivity (despite the odd site that allows this).

Worst case scenario, an unsuspecting user activates an overlay button, and while it's loading, starts clicking state-changing buttons around the page just to kill time.

Re: Buttons with built-in loading indicators

#54

Post by BHSPitMonkey » Wed, Jun 05, 2013, 10:03 PM UTC

cleaver wrote: post #46

pamelafox wrote: post #38

Earlier quoted context omitted.

That's actually the technique I use for buttons in my apps, and I believe I prompted them to add it to Bootstrap. You can see the thread about it here where it was added: https://github.com/twitter/bootstrap/issues/471#issuecomment... But my point isn't who-invented-it, it's that it's very easy to implement this in your own buttons without using Bootstrap. I still use my own implementation, despite suggesting it to t…

It's a great technique for buttons, even without the nice design. I've wondered for years why this is not more common. Having a "submit" button change state is such better UI than those horrid messages warning you not to click twice—I still run into that from time to time.

The best route would probably be to show that warning somewhere, but hide it using JS. That way it's visible in scenarios where JS isn't available.

Re: Buttons with built-in loading indicators

#55

Post by Leszek » Wed, Jun 05, 2013, 10:06 PM UTC

Something like this, but with a progress bar instead of a generic loading thing, would also be very nice.

Re: Buttons with built-in loading indicators

#56

Post by ultimatedelman » Wed, Jun 05, 2013, 10:18 PM UTC

Leszek wrote: post #55

Something like this, but with a progress bar instead of a generic loading thing, would also be very nice.

this can be very difficult, as very often the front end is not aware of the loading status of an item. pretty much only files being uploaded can have any sort of progress attached to them.

Re: Buttons with built-in loading indicators

#57

Post by chebucto » Wed, Jun 05, 2013, 11:55 PM UTC

yvoschaap2 wrote: post #10

Hakim has more amazing experiments on his site (incl. Sinuous) worth checking out: http://lab.hakim.se .

I love http://hakim.se/experiments/html5/keylight/03/

Re: Buttons with built-in loading indicators

#58

Post by bobfunk » Thu, Jun 06, 2013, 12:59 AM UTC

ultimatedelman wrote: post #52

This is very pretty, but there's no need for a larger, separate JS file. All of this can be handled with CSS and a simple JS command that adds/removes a CSS class on click. Quick demo: http://codepen.io/ultimatedelman/pen/klDHy Since you wouldn't obviously use all the effects in this article, just pick the one you would use and have the .loading class effect the correct change. UPDATE: now with fewer elements. Only H…

Yeah, been doing it that way for the signup form on Webpop for a while now (albeit with a different animation).

Re: Buttons with built-in loading indicators

#59

Post by SeoxyS » Thu, Jun 06, 2013, 3:36 AM UTC

A few years ago I built a button for an iPhone app that turned into a progress bar while loading:

Here's a CSS version of it (with image assets).

http://codepen.io/kballenegger/pen/uJGCF

Re: Buttons with built-in loading indicators

#60

Post by mrtbld » Thu, Jun 06, 2013, 10:50 AM UTC

nkorth wrote: post #43

mrtbld wrote: post #19

On Firefox, a dotted line appears around the button's text when it has focus (after click for instance). IMO, it ruins the nice clear style of the buttons. You can remove it with the non-standard `button::-moz-focus-inner{border:0}`. Then you could define some style for `button:focus{...}` to help keyboard navigation.

Or just button:focus{ outline:none; }. That should remove focus styling on all browsers, last I checked.

Not on Firefox. It doesn't use the pseudo-class :focus{outline} for buttons' dotted line, but the pseudo-element ::-moz-focus-inner on which a border is applied.

Note that the dotted line appears inside the button, around the text, and not around the button like :focus{outline} would do.