3 ms·
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 cla
by ultimatedelman 13y ago
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 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 :)
- bobfunk 13y agoYeah, been doing it that way for the signup form on Webpop for a while now (albeit with a different animation).
- RyanMcGreal 13y agoThe other nice touch in Ladda is that it disables the form button on activation. Again, given your demo, not hard to replicate with a `this.disabled=true` statement.
- ultimatedelman 13y agoYou can also do this with CSS: pointer-events: none; cursor: not-allowed;
- simonobo 13y agoThough doesn't stop giving it focus and pressing it with the keyboard.