Lugo Labs

loda button ui

I love this library. It's just a few lines of CSS3 that add a twist to jQuery UI buttons. And it creates the same effect as the loda-button. (Click on the buttons above for a demo - a timeout of 2 seconds imitates a server load)

First, you need to download the jQuery UI buttons files. The HTML markup is simple:

html
    <button>Button with icon only</button>

To instantiate the plugin call:

js
    var btn = $('button').button({
        icons: {
            primary: 'ui-icon-locked'
        }
    });

The animation cames alive when the button has a class loda-btn-ui-loading or ui-button-disabled. The latter is added by jQuery UI when the button is disabled:

js
    btn.button('disable');

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

Zeemr promo lugoland