Ladda – loading indicators for buttons

DirectCode | September 22, 2016 | Animation, CSS, Forms, jQuery, Libraries, UI | No Comments

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 - loading indicators for buttons - demo — Ladda – loading indicators for buttons – demo

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: