Loda Button

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

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 mb-2 mr-2">
  <span aria-hidden="true" class="loda-icon iconic-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.