Form Submit Buttons with Built-in Loading Indicators - Ladda

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

How to use it:

1. Load the spin.min.js and ladda.min.js in the bottom of your web page

<script src="dist/spin.min.js"></script> 
<script src="dist/ladda.min.js"></script> 

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

<link rel="stylesheet" href="dist/ladda.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

<button class="ladda-button" data-color="purple" data-style="expand-right">Submit</button>

4. Bind progress buttons and simulate loading progress

Ladda.bind( 'button', {
callback: function( instance ) {
var progress = 0;
var interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance.setProgress( progress );
if( progress === 1 ) {
clearInterval( interval );
}, 200 );
} );

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

var l = Ladda.create( document.querySelector( 'button' ) );
l.setProgress( 0-1 );

Change log:


  • v1.0.5

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

  • Publication date: 01.01.2018
  • Source