Form Submit Buttons with Built-in Loading Indicators - Ladda

File Size: 20 KB
Views Total: 71062
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Form Submit Buttons with Built-in Loading Indicators - Ladda

Ladda is a JavaScript loading library for creating buttons with built-in loading indicators (spinner and loading bar). Requires the latest spin.js library.

Ladda 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.

Also supports the latest Bootstrap framework.

How to use it:

1. Install and import the spin & ladda modules.

$ npm install spin.js ladda --save 
import * as Ladda from 'ladda';

2. Load required ladda.min.css in the head section of your web page

<!-- Full -->
<link rel="stylesheet" href="dist/ladda.min.css">

<!-- Without visual styles -->
<link rel="stylesheet" href="dist/ladda-themeless.min.css">

3. Create a button with both spinner and loading bar. Using html5 data-* attributes to custom the loading style and color of your button

  • data-color: green, red, blue, purple, or mint
  • data-style: expand-left, expand-right, expand-up, expand-down, contract, contract-overlay, zoom-in, zoom-out, slide-left, slide-right, slide-up, or slide-down
  • data-size: xs, s, l, or xl
  • data-spinner-size: spinner size
  • data-spinner-color: spinner color
  • data-spinner-lines: the number of lines
<button class="ladda-button" 
        <span class="ladda-label">Submit</span>

4. Initialize the plugin on this button element.

var instance = Ladda.create(document.querySelector('.laddaButton'));

5. You can control loading explicitly using the JavaScript API as outlined below:

// Start loading

// Will display a progress bar for 60% of the button width
instance.setProgress( 0.6 );

// Stop loading

// Toggle between loading/not loading states

// Check the current state

// Delete the button's ladda instance

// Stop all

// trigger the loading animation on click

//automatically stops after 3 seconds
Ladda.bind('button[type=submit]', {timeout: 3000});

Change log:


This awesome jQuery plugin is developed by hakimel. For more Advanced Usages, please check the demo page or visit the official website.