A set of buttons which merge loading indicators into themselves to bridge the gap between action and feedback.

Check out the demo page.

Make sure the ladda.css and ladda.js files are included on your page.

If you will be using the loading animation for a form that is submitted to the server (always resulting in a page reload) you can use the bind() method:

// Automatically trigger the loading animation on click
Ladda.bind( 'input[type=submit]' );

// Same as the above but automatically stops after two seconds
Ladda.bind( 'input[type=submit]', { timeout: 2000 } );

If you want JavaScript control over your buttons you can use the following approach:

// Create a new instance of ladda for the specified button
var l = Ladda.create( document.querySelector( '.my-button' ) );

// Start loading
l.start();

// Stop loading
l.stop();

// Toggle between loading/not loading states
l.toggle();

// Check the current state
l.isLoading();

All loading animations on the page can be stopped by using:

Ladda.stopAll();

The project is tested in Chrome and Firefox. It Should Work™ in the current stable releases of Chrome, Firefox, Safari as well as IE9 and up.

• JS API

• Initial release

MIT licensed

Copyright (C) 2013 Hakim El Hattab, http://hakim.se