Buttons with built-in loading indicators • Hacker News Board

Re: Buttons with built-in loading indicators

#11

Post by prisonguard » Wed, Jun 05, 2013, 9:36 AM UTC

lamby wrote: post #6

It's not known very well, but Bootstrap has similar functionality, albeit not as pretty: http://twitter.github.io/bootstrap/javascript.html#buttons

agreed, might be trivial but i think the button text could as well switch to 'Submitting' like bootstrap

Re: Buttons with built-in loading indicators

#12

Post by Achshar » Wed, Jun 05, 2013, 9:36 AM UTC

That looks cool. But in most of my projects, I use a "frame" structure. After submitting something, the frame changes to either left or right, completely moving the submit button out of sight. So while this is very cool, it doesn't work for popups and frame like designs which are supposed to "move" immediately and process ajax requests in background to give an illusion of speed.

Re: Buttons with built-in loading indicators

#13

Post by jumblesale » Wed, Jun 05, 2013, 9:38 AM UTC

This is really cool! The only thing that makes it a little ugly for me is that when I click on it, my browser puts an ugly grey box around the text like I'm selecting it. Could this be solved by immediately changing the focus of the input?

Re: Buttons with built-in loading indicators

#14

Post by modarts » Wed, Jun 05, 2013, 9:41 AM UTC

yvoschaap2 wrote: post #10

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

Wow, he's talented. Avgrund seems like it could get some use on a project i'm working on now: http://lab.hakim.se/avgrund/

Re: Buttons with built-in loading indicators

#15

Post by comex » Wed, Jun 05, 2013, 9:42 AM UTC

It's worth a note that these buttons are very laggy in MobileSafari, except for zoom-in and zoom-out, which use -webkit-transform and thus have hardware accelerated animation. While slide-* could be changed to use -webkit-transform, I'm somewhat surprised that the performance of the others is so bad, and I wonder if there's some not-completely-awful trick that would improve expand-*.

Re: Buttons with built-in loading indicators

#16

Post by jurre » Wed, Jun 05, 2013, 9:43 AM UTC

I actually did a similar thing for iOS, I'll try to extract it from that project and open source it when I find time :)

Re: Buttons with built-in loading indicators

#17

Post by dspillett » Wed, Jun 05, 2013, 9:45 AM UTC

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.

Re: Buttons with built-in loading indicators

#18

Post by mullr » Wed, Jun 05, 2013, 9:46 AM UTC

This is quite nice. All of the animations would be made better by removing the bounce at the end; it's a jarring way to end something that's otherwise very smooth.

Re: Buttons with built-in loading indicators

#19

Post by mrtbld » Wed, Jun 05, 2013, 10:01 AM UTC

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.

Re: Buttons with built-in loading indicators

#20

Post by Kequc » Wed, Jun 05, 2013, 10:29 AM UTC

yvoschaap2 wrote: post #10

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

All of those are useful.