41–50 of 64 posts
It's not known very well, but Bootstrap has similar functionality, albeit not as pretty: http://twitter.github.io/bootstrap/javascript.html#buttons
I combined the bootstrap method with some Font-Awesome, and accomplished getting some animation in my buttons in a simple manner. See "Buttons" section at http://fortawesome.github.io/Font-Awesome/examples/
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.
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.
We did something similar on one of our office hack days. http://waitable.adstruc.com/ https://github.com/ADstruc/waitable 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.
It's not known very well, but Bootstrap has similar functionality, albeit not as pretty: http://twitter.github.io/bootstrap/javascript.html#buttons
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 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-*.
I actually was impressed by their smoothness on my 4S. What device are you using?
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.
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.