Submit your widget

jQuery and CCS3 animates load button

Created 2 years ago   Views 16387   downloads 2947    Author lugolabs
jQuery and CCS3 animates load button
View DemoDownload 331.8 KB
54
Share |

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>

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:

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

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

lodaBtn.lodaButton('start');

and to stop the animation:

lodaBtn.lodaButton('stop');

The animation is created using CSS3's animation, transitions and transforms, which are supported by Chrome, Firefox, Opera, and IE10.

The aritle source:http://lugolabs.com/blog/2013/06/23/loda-button