Loading Buttons

A UI concept which merges loading indicators into the action that invoked them. 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.

Overview

Buttons accept the following attributes:

• data-style: one of the button styles, full list in examples
• data-spinner-size: 40, pixel dimensions of spinner, defaults to dynamic size based on the button height
• data-spinner-color: A hex code or any named CSS color.
• data-spinner-lines: 12, the number of lines the for the spinner, defaults to 12

Examples

Buttons must have .btn-ladda class or .btn-ladda-progress class buttons with progress bar.

Expand

CoreUI Pro Component

<button class="btn btn-success btn-ladda" data-style="expand-left">Submit</button>
<button class="btn btn-success btn-ladda" data-style="expand-right">Submit</button>
<button class="btn btn-success btn-ladda" data-style="expand-up">Submit</button>
<button class="btn btn-success btn-ladda" data-style="expand-down">Submit</button>

Contract

CoreUI Pro Component

<button class="btn btn-success btn-ladda" data-style="contract">Submit</button>
<button class="btn btn-success btn-ladda" data-style="contract-overlay" style="z-index: 10;">Submit</button>

Zoom

CoreUI Pro Component

<button class="btn btn-success btn-ladda" data-style="zoom-in">Submit</button>
<button class="btn btn-success btn-ladda" data-style="zoom-out">Submit</button>

Slide

CoreUI Pro Component

<button class="btn btn-success btn-ladda" data-style="slide-left">Submit</button>
<button class="btn btn-success btn-ladda" data-style="slide-right">Submit</button>
<button class="btn btn-success btn-ladda" data-style="slide-up">Submit</button>
<button class="btn btn-success btn-ladda" data-style="slide-down">Submit</button>

Built-in progress bar

CoreUI Pro Component

<button class="btn btn-success btn-ladda-progress" data-style="expand-right">Submit</button>
<button class="btn btn-success btn-ladda-progress" data-style="contract">Submit</button>

JavaScript

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('button[type=submit]');

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

Note: when using the bind() method on buttons that are inside a form, loading indicators will not be shown until the form is valid.

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

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

// Start loading
btn.start();

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

// Stop loading
btn.stop();

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

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

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

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

Ladda.stopAll();

With jQuery

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 ladda('bind') method:

// Automatically trigger the loading animation on click
$('button[type=submit]').ladda('bind');

// Same as the above but automatically stops after two seconds
$('button[type=submit]').ladda('bind', { 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 btn = $('.my-button').ladda();

// Start loading
btn.ladda('start');

// Will display a progress bar for 50% of the button width
btn.ladda('setProgress', 0.5 );

// Stop loading
btn.ladda('stop');

// Toggle between loading/not loading states
btn.ladda('toggle');

// Check the current state
btn.ladda('isLoading');

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

$.ladda('stopAll');