HTML Buttons with built-in loading Spinner - Ladda

Ladda a beautiful user interface approach of integrating progress indicators in HTML buttons. It give a nice user experience as it immediately gives feedback to user that his/her requested operation is underway. Ladda is available on different CDN which make its usage extremely simple, you just have to add the link to CDN and simple write the HTML for the button and you are done. Ladda buttons are highly configurable and every aspect of its design can be configured. Required files for to render Ladda Button are.

<!-- Ladda Stylesheet -->
<link rel="stylesheet" href="https://cdn.tutorialjinni.com/Ladda/1.0.0/ladda.min.css" />
<!-- Ladda JavaScript -->
<script src="https://cdn.tutorialjinni.com/Ladda/1.0.0/spin.min.js"></script>
<script src="https://cdn.tutorialjinni.com/Ladda/1.0.0/ladda.min.js"></script>

Please not the order in which the scripts are called, it should be this way otherwise it will throw an error.

Next is simple you need to add the button tag like the following

<button class="ladda-button" data-color="green" data-style="expand-left">Submit</button>

Ladda button must have a ladda-button CSS Class. Above code will render in the following button with spinner. Click on it.



A total of 12 different styles are supported for the spinner. Possible data-style values are. Click on any button to view them in action.

expand-left

Submit

expand-right

Submit

expand-up

Submit

expand-down

Submit

contract

Submit

contract-overlay

Submit

zoom-in

Submit

zoom-out

Submit

slide-left

Submit

slide-right

Submit

slide-up

Submit

slide-down

Submit

data-color attribute can only support five color options i.e green,red,blue,purple and mint. However if you want to customize it you can do so by adding the following CSS file

<link rel="stylesheet" href="https://cdn.tutorialjinni.com/Ladda/1.0.0/ladda-themeless.min.css" />

Progress Bar can also be shown in the Ladda Buttons Percentage of loading can be controlled via the JavaScript API

var l = Ladda.create( document.querySelector( 'button' ) );
l.start(); // Start Progress bar
l.stop(); // Stop Progress bar
l.toggle(); // Toggle Start/Stop
l.isLoading(); // Check if it is Loading
l.setProgress( 0-1 ); // Set the progress bar position 
			// 0 mean start and 1 mean full	

if the Ladda button is applied to a form the form will be submitted and the page is reloaded. To alter this behavior bind the Button with the ladda, like the following code.

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

Ladda Buttons can be rendered in four size for that data-size attribute is used and it has xs,s,l and xl values, as demonstrated below.

<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xs">Submit</button>

Ladda jQuery Plugin

Ladda is available as a jQuery plugin too for that jQuery plugin is also required from CDN

<script src="https://cdn.tutorialjinni.com/Ladda/1.0.0/ladda.jquery.min.js"></script>

jQuery API

// Create a new instance of ladda for the specified button
var l = $( '.my-button' ).ladda();

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

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

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

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

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

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

$.ladda( 'stopAll' );

Angular Ladda

There a ladda wrapper for Angular which is available here. There is CDN hosting too for all the necessary file for angular-ladda available free to use here.

Ladda for Bootstrap

There a ladda wrapper for Bootstrap 3 which is available here. There is CDN hosting too for all the necessary file for angular-ladda available free to use here.

More detail information about ladda can be found here.