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:

    <button>Button with icon only</button>

To instantiate the plugin call:

    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:


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