loda button

June 23, 2013

Lock Upload Download Connect User Search Phone Star Remove Mail Flickr Share PDF Save

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:

html
<a href="#" class="loda-btn">
    <span aria-hidden="true" class="loda-icon icofont-mail"></span>
    Mail
</a>

The classes loda-btn and 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:

js
var lodaBtn = $('#loda-btn').lodaButton();

To activate the button and start the icon animation, call:

js
lodaBtn.lodaButton('start');

and to stop the animation:

js
lodaBtn.lodaButton('stop');

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.

The icon fonts are from icomoon. For a jQuery UI version of the plugin, check loda-button-ui.

Happy coding!