4 ms·

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

by lamby 13y ago

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

simonbarker87 13y ago
Did not know about this at all, thanks
prisonguard 13y ago
agreed, might be trivial but i think the button text could as well switch to 'Submitting' like bootstrap
ronilan 13y ago
As long as te app won't "break" by the user navigating away, anything that avoids the "loading" modal is a great UX improvement. Ajax errors can also be sent to the button with "error" icon, BTW.
pamelafox 13y ago
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-2500189 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 them. Just create some data attributes (I have data-default-message, data-inflight-message, and data-success-message) and change your buttons appropriately. I have a standard function that I call on my forms that handles that for me, which I've gisted here: https://gist.github.com/pamelafox/5714109 https://gist.github.com/pamelafox/5714109 You could do that in a more elegant way than that bit of code. :-) I prefer the changing-message approach to the showing-the-indicator approach because the verb stays, and you remember what it was that you were doing. Handy for us forgetful folks. You can use both, too, of course.
- cleaver 13y ago
  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.
  - BHSPitMonkey 13y ago
    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.
taude 13y ago
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/ http://fortawesome.github.io/Font-Awesome/examples/
- j-m-o 13y ago
  Font-Awesome also has a really nice 'Animated Spinner' icon as well on that example page, which works nicely with Bootstrap buttons.

by lamby 13y ago

simonbarker87 13y ago

Did not know about this at all, thanks

prisonguard 13y ago

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

ronilan 13y ago

As long as te app won't "break" by the user navigating away, anything that avoids the "loading" modal is a great UX improvement. Ajax errors can also be sent to the button with "error" icon, BTW.

pamelafox 13y ago

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-2500189 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 them. Just create some data attributes (I have data-default-message, data-inflight-message, and data-success-message) and change your buttons appropriately. I have a standard function that I call on my forms that handles that for me, which I've gisted here: https://gist.github.com/pamelafox/5714109 https://gist.github.com/pamelafox/5714109 You could do that in a more elegant way than that bit of code. :-) I prefer the changing-message approach to the showing-the-indicator approach because the verb stays, and you remember what it was that you were doing. Handy for us forgetful folks. You can use both, too, of course.

cleaver 13y ago
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.
- BHSPitMonkey 13y ago
  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.

taude 13y ago

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/ http://fortawesome.github.io/Font-Awesome/examples/

j-m-o 13y ago
Font-Awesome also has a really nice 'Animated Spinner' icon as well on that example page, which works nicely with Bootstrap buttons.