Buttons with built-in loading indicators

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.<p>Quick demo: <a href="http://codepen.io/ultimatedelman/pen/klDHy" rel="nofollow">http://codepen.io/ultimatedelman/pen/klDHy</a><p>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.<p>UPDATE: now with fewer elements. Only HTML element needed to achieve this effect is the button itself :)

It's not known very well, but Bootstrap has similar functionality, albeit not as pretty:<p><a href="http://twitter.github.io/bootstrap/javascript.html#buttons" rel="nofollow">http://twitter.github.io/bootstrap/javascript.html#buttons</a>

Hakim has more amazing experiments on his site (incl. Sinuous) worth checking out: <a href="http://lab.hakim.se" rel="nofollow">http://lab.hakim.se</a>.

Hm, I was going to say it is slightly messed up in Opera -- the boxes don't move like they should -- but I guess it's not going to matter in the very near future. :(

What impresses me the most is the JS. It is so clean, concise, and, the only other word that I can think of, professional. It puts the onus of capability on the browser and doesn't try to make up for those who lack. Sure you can shim addEventListener or setAttribut, but F IE (really), it has been adding complexity for far too long.

Nifty. I don't know how we missed the possibility - this looks really nice.<p>Oh, and <i>thank you</i> for adding a license. So often I see neat hacks posted, without any license at all...

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.

Nice! Although the loading gif looks a bit dodgy on retina screen. I'd suggest playing with CSS and making that loading bit a pure css shape.

We did something similar on one of our office hack days.<p><a href="http://waitable.adstruc.com/" rel="nofollow">http://waitable.adstruc.com/</a><p><a href="https://github.com/ADstruc/waitable" rel="nofollow">https://github.com/ADstruc/waitable</a><p>We built a generic jQuery plugin which binds to jQuery promises, taking care of the waiting state and double-submit issues while firing off Ajax requests.

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

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?

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

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.

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 :)

This is also a nice solution<p><a href="http://fgnass.github.io/spin.js/" rel="nofollow">http://fgnass.github.io/spin.js/</a>

I saw this and just thought, "why isn't this the way we do buttons and loading" nice

A few years ago I built a button for an iPhone app that turned into a progress bar while loading:<p>Here's a CSS version of it (with image assets).<p><a href="http://codepen.io/kballenegger/pen/uJGCF" rel="nofollow">http://codepen.io/kballenegger/pen/uJGCF</a>

I like the slid.es examples. Are there some JavaScript based slides, which work on a server so that one user can navigate to new slides and the other users see the change in their browser?

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.

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

Interesting use case, but not practical enough. All the times when you need to show a loading indicator do not occur after clicking on a button, loading indicator needs to come up when any amount of delay is anticipated. It can show up after clicking a link, image etc etc whereas this example implies as if loading indicator is only need when a button is clicked.

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

this is great, thanks for sharing!

The slide right seems broken.

very cool. progress bars next?