Back to post

Ladda is a unique UI concept which create attractive loading indicators for button. Basically the concept is planned for use with any types of form where it gives users immediate feedback upon for submission. Loading animation can be extended from left, right, up and down, also supports progress bar when the button is loading.

Features:

How to use it:

1. Include the Javascript spin.min.js and ladda.min.js at the bottom of the web page.

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

2. Include the CSS ladda.min.css in the header of the page.

<link rel="stylesheet" href="/path/to/ladda.min.css">

3. Add the basic HTML to the page.

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

- OR -

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

4. Initialize the plugin and we're ready to go. 

// 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});

Button attributes:

  • expand-left

  • expand-right

  • expand-up

  • expand-down

HTML structure

<li class="button-demo">
  <button class="ladda-button" data-color="green" data-style="expand-left">Submit</button>
</li>
<li class="button-demo">
  <button class="ladda-button" data-color="green" data-style="expand-right">Submit</button>
</li>
<li class="button-demo">
  <button class="ladda-button" data-color="green" data-style="expand-up">Submit</button>
</li>
<li class="button-demo">
  <button class="ladda-button" data-color="green" data-style="expand-down">Submit</button>
</li>

Script

Ladda.bind( '.button-demo button', { timeout: 2000 } );

  • contract

  • contract-overlay

  • zoom-in

  • zoom-out

HTML structure

<li class="button-demo">
  <button class="ladda-button" data-color="red" data-style="contract">Submit</button>
</li>
<li class="button-demo">
  <button class="ladda-button" data-color="red" data-style="contract-overlay">Submit</button>
</li>
<li class="button-demo">
  <button class="ladda-button" data-color="red" data-style="zoom-in">Submit</button>
</li>
<li class="button-demo">
  <button class="ladda-button" data-color="red" data-style="zoom-out">Submit</button>
</li>

Script

Ladda.bind( '.button-demo button', { timeout: 2000 } );

  • slide-left

  • slide-right

  • slide-up

  • slide-down

HTML structure

<li class="button-demo">
  <button class="ladda-button" data-color="blue" data-style="slide-left">Submit</button>
</li>
<li class="button-demo">
  <button class="ladda-button" data-color="blue" data-style="slide-right">Submit</button>
</li>
<li class="button-demo">
  <button class="ladda-button" data-color="blue" data-style="slide-up">Submit</button>
</li>
<li class="button-demo">
  <button class="ladda-button" data-color="blue" data-style="slide-down">Submit</button>
</li>

Script

Ladda.bind( '.button-demo button', { timeout: 2000 } );

  • expand-right

  • contract

HTML structure

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

Script

Ladda.bind( '.progress-demo 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 ) {
				instance.stop();
				clearInterval( interval );
			}
		}, 200 );
	}
} );