This simple jQuery plugin animates the button's icon as the data are being fetched from the server. (Click on the buttons above for a demo - a timeout of 2 seconds imitates a server load).
The button's markup is simple:
<a href="#" class="loda-btn"> <span aria-hidden="true" class="loda-icon icon-mail"></span> Mail </a>
loda-icon are used by the plugin to style the button. Again, the styling is quite simple and done in
loda-button.css. The OVERRIDABLE section of the stylesheet can be changed as you like. The NOT OVERRIDABLE bit sets up the animation of the button.
To create the button use the normal jQuery style:
var lodaBtn = $('#loda-btn').lodaButton();
To activate the button and start the icon animation, call:
and to stop the animation:
The animation is created using CSS3's animation, transitions and transforms, which are supported by Chrome, Firefox, Opera, and IE10.
You can find a working example at github.