function e(a, e){e=e||{};var f=[];"string"==typeof a?f=h(document.querySelectorAll(a)):"object"==typeof a&&"string"==typeof a.nodeName
&&(f=[a]);for(var g=0,i=f.length;i>g;g++)!function(){var a=f[g];if("function"==typeof a.addEventListener){var h=b(a),i=-1;a.addEventListener
("click",function(b){var f=!0,g=c(a,"FORM");if("undefined"!=typeof g)if("function"==typeof g.checkValidity)f=g.checkValidity();else
for(var j=d(g),k=0;k<j.length;k++)""===j[k].value.replace(/^\s+|\s+$/g,"")&&(f=!1),"checkbox"!==j[k].type&&"radio"!==j[k].type||j[k].checked||(f=!1),"email"===j[k].type&&(f=/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(j[k].value));f&&(h.startAfter(1),"number"==typeof e.timeout&&(clearTimeout(i),i=setTimeout(h.stop,e.timeout)),"function"==typeof e.callback&&e.callback.apply(null,[h]))},!1)}}()}...
#### 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:
```javascript
// 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 } );
```
If you want JavaScript control over your buttons you can use the following approach:
...function b(a){if("undefined"==typeof a)return void console.warn("Ladda button target must be defined.");if(/ladda-button/i.test(
a.className)||(a.className+=" ladda-button"),a.hasAttribute("data-style")||a.setAttribute("data-style","expand-right"),!a.querySelector
(".ladda-label")){var b=document.createElement("span");b.className="ladda-label",i(a,b)}var c,d=a.querySelector(".ladda-spinner");
d||(d=document.createElement("span"),d.className="ladda-spinner"),a.appendChild(d);var e,f={start:function(){return c||(c=g(a)),
a.setAttribute("disabled",""),a.setAttribute("data-loading",""),clearTimeout(e),c.spin(d),this.setProgress(0),this},startAfter:function
(a){return clearTimeout(e),e=setTimeout(function(){f.start()},a),this},stop:function(){return a.removeAttribute("disabled"),a.removeAttribute
("data-loading"),clearTimeout(e),c&&(e=setTimeout(function(){c.stop()},1e3)),this},toggle:function(){return this.isLoading()?this
.stop():this.start(),this},setProgress:function(b){b=Math.max(Math.min(b,1),0);var c=a.querySelector(".ladda-progress");0===b&&c
&&c.parentNode?c.parentNode.removeChild(c):(c||(c=document.createElement("div"),c.className="ladda-progress",a.appendChild(c)),c
.style.width=(b||0)*a.offsetWidth+"px")},enable:function(){return this.stop(),this},disable:function(){return this.stop(),a.setAttribute
("disabled",""),this},isLoading:function(){return a.hasAttribute("data-loading")},remove:function(){clearTimeout(e),a.removeAttribute
("disabled",""),a.removeAttribute("data-loading",""),c&&(c.stop(),c=null);for(var b=0,d=j.length;d>b;b++)if(f===j[b]){j.splice(b
,1);break}}};return j.push(f),f}...
Ladda.bind( 'button[type=submit]', { timeout: 2000 } );
```
If you want JavaScript control over your buttons you can use the following approach:
```javascript
// Create a new instance of ladda for the specified button
var l = Ladda.create( document.querySelector( '.my-button' ) );
// Start loading
l.start();
// Will display a progress bar for 50% of the button width
l.setProgress( 0.5 );
...function f(){for(var a=0,b=j.length;b>a;a++)j[a].stop()}...
// Delete the button's ladda instance
l.remove();
```
All loading animations on the page can be stopped by using:
```javascript
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:
```javascript
...function bind( target, options ) {
options = options || {};
var targets = [];
if( typeof target === 'string' ) {
targets = toArray( document.querySelectorAll( target ) );
}
else if( typeof target === 'object' && typeof target.nodeName === 'string' ) {
targets = [ target ];
}
for( var i = 0, len = targets.length; i < len; i++ ) {
(function() {
var element = targets[i];
// Make sure we're working with a DOM element
if( typeof element.addEventListener === 'function' ) {
var instance = create( element );
var timeout = -1;
element.addEventListener( 'click', function( event ) {
// If the button belongs to a form, make sure all the
// fields in that form are filled out
var valid = true;
var form = getAncestorOfTagType( element, 'FORM' );
if( typeof form !== 'undefined' ) {
// Modern form validation
if( typeof form.checkValidity === 'function' ) {
valid = form.checkValidity();
}
// Fallback to manual validation for old browsers
else {
var requireds = getRequiredFields( form );
for( var i = 0; i < requireds.length; i++ ) {
if( requireds[i].value.replace( /^\s+|\s+$/g, '' ) === '' ) {
valid = false;
}
// Radiobuttons and Checkboxes need to be checked for the "checked" attribute
if( (requireds[i].type === 'checkbox' || requireds[i].type === 'radio' ) && !requireds[i].checked ) {
valid = false;
}
// Email field validation
if( requireds[i].type === 'email' ) {
valid = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test( requireds[i].value );
}
}
}
}
if( valid ) {
// This is asynchronous to avoid an issue where setting
// the disabled attribute on the button prevents forms
// from submitting
instance.startAfter( 1 );
// Set a loading timeout if one is specified
if( typeof options.timeout === 'number' ) {
clearTimeout( timeout );
timeout = setTimeout( instance.stop, options.timeout );
}
// Invoke callbacks
if( typeof options.callback === 'function' ) {
options.callback.apply( null, [ instance ] );
}
}
}, false );
}
})();
}
}...
#### 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:
```javascript
// 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 } );
```
If you want JavaScript control over your buttons you can use the following approach:
...function create( button ) {
if( typeof button === 'undefined' ) {
console.warn( "Ladda button target must be defined." );
return;
}
// The button must have the class "ladda-button"
if( !/ladda-button/i.test( button.className ) ) {
button.className += ' ladda-button';
}
// Style is required, default to "expand-right"
if( !button.hasAttribute( 'data-style' ) ) {
button.setAttribute( 'data-style', 'expand-right' );
}
// The text contents must be wrapped in a ladda-label
// element, create one if it doesn't already exist
if( !button.querySelector( '.ladda-label' ) ) {
var laddaLabel = document.createElement( 'span' );
laddaLabel.className = 'ladda-label';
wrapContent( button, laddaLabel );
}
// The spinner component
var spinner,
spinnerWrapper = button.querySelector( '.ladda-spinner' );
// Wrapper element for the spinner
if( !spinnerWrapper ) {
spinnerWrapper = document.createElement( 'span' );
spinnerWrapper.className = 'ladda-spinner';
}
button.appendChild( spinnerWrapper );
// Timer used to delay starting/stopping
var timer;
var instance = {
/**
* Enter the loading state.
*/
start: function() {
// Create the spinner if it doesn't already exist
if( !spinner ) spinner = createSpinner( button );
button.setAttribute( 'disabled', '' );
button.setAttribute( 'data-loading', '' );
clearTimeout( timer );
spinner.spin( spinnerWrapper );
this.setProgress( 0 );
return this; // chain
},
/**
* Enter the loading state, after a delay.
*/
startAfter: function( delay ) {
clearTimeout( timer );
timer = setTimeout( function() { instance.start(); }, delay );
return this; // chain
},
/**
* Exit the loading state.
*/
stop: function() {
button.removeAttribute( 'disabled' );
button.removeAttribute( 'data-loading' );
// Kill the animation after a delay to make sure it
// runs for the duration of the button transition
clearTimeout( timer );
if( spinner ) {
timer = setTimeout( function() { spinner.stop(); }, 1000 );
}
return this; // chain
},
/**
* Toggle the loading state on/off.
*/
toggle: function() {
if( this.isLoading() ) {
this.stop();
}
else {
this.start();
}
return this; // chain
},
/**
* Sets the width of the visual progress bar inside of
* this Ladda button
*
* @param {Number} progress in the range of 0-1
*/
setProgress: function( progress ) {
// Cap it
progress = Math.max( Math.min( progress, 1 ), 0 );
var progressElement = button.querySelector( '.ladda-progress' );
// Remove the progress bar if we're at 0 progress
if( progress === 0 && progressElement && progressElement.parentNode ) {
progressElement.parentNode.removeChild( progressElement );
}
else {
if( !progressElement ) {
progressElement = document.createElement( 'div' );
progressElement.className = 'ladda-progress';
button.appendChild( progressElement );
}
progressElement.style.width = ( ( progress || 0 ) * button.offsetWidth ) + 'px';
}
},
enable: function() {
this.stop();
return this; // chain
},
disable: function () {
this.stop();
button.setAttribute( 'disabled', '' );
return this; // chain
},
isLoading: function() {
return button.hasAttribute( 'data-loading' );
},
remove: function() {
clearTimeout( timer );
button.removeAttribute( 'disabled', '' );
button.removeAttribute( 'data-loading', '' );
if( spinner ) {
spinner.stop();
spinner = null;
}
for( var i = 0, len = ALL_INSTANCES.length; i < len; i++ ) {
if( instance === ALL_INSTANCES[i] ) {
ALL_INSTANCES.splice( i, 1 );
break;
}
}
}
};
ALL_INSTANCES.push( instance );
return instance;
}...
Ladda.bind( 'button[type=submit]', { timeout: 2000 } );
```
If you want JavaScript control over your buttons you can use the following approach:
```javascript
// Create a new instance of ladda for the specified button
var l = Ladda.create( document.querySelector( '.my-button' ) );
// Start loading
l.start();
// Will display a progress bar for 50% of the button width
l.setProgress( 0.5 );
...function stopAll() {
for( var i = 0, len = ALL_INSTANCES.length; i < len; i++ ) {
ALL_INSTANCES[i].stop();
}
}...
// Delete the button's ladda instance
l.remove();
```
All loading animations on the page can be stopped by using:
```javascript
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:
```javascript
...