Ladda – loading indicators for buttons

Form submit and other buttons, with built-in loading indicators? Just try Ladda!

Ladda – a solution of loading indicators for buttons

Ladda is a JavaScript library for creating buttons with built-in loading indicators (spinner / loading bar). The solution primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing.

Ladda brings buttons with built-in loading indicators, effectively bridging the gap between action and feedback!

Usage

Download the library. The necessary CSS and JS files are ready in /dist directory.

Ladda buttons must be given the class ladda-button, and the button label needs to have the ladda-label class. The ladda-label will be automatically created if it does not exist in the DOM.

Below is an example of a button which will use the expand-right animation style.

<button class="ladda-button" data-style="expand-right">
  <span class="ladda-label">Submit</span>
</button>

Buttons accept the following attributes:

– data-color (green / red / blue / purple / mint)

– data-style (one of the button styles)

– data-size (xs / s / l / xl, defaults to medium)

– data-spinner-size (40, pixel dimensions of spinner)

– data-spinner-color (a hex code or any named CSS color)

– data-spinner-lines (the number of lines the for the spinner, defaults to 12)

JavaScript code!

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

Ladda.bind( 'button[type=submit]' );

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

If we want JavaScript control over our buttons, we 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();

// Will display a progress bar for 50% of the button width
l.setProgress( 0.5 );

// Stop loading
l.stop();

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

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

// Delete the button's ladda instance
l.remove();

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

Ladda.stopAll();

Please refer to the documentation for more examples – with jQuery.

License: MIT

Demos:

http://javascript-html5-tutorial.net/demos/demo-ladda

Get Ladda loading indicators for buttons from GitHub:

https://github.com/hakimel/Ladda

You may also like:

Smart Wizard – a jQuery form wizard plugin

Progression.js – jQuery form progress indicator

Generate spinning activity indicators in JavaScript

Slim progress bar jQuery plugin – NProgress

Save form data to local storage with Phoenix or Sisyphus jQuery plugins

Enjoy!