Menu
I'm using Ladda to introduce some loading effects on my form buttons. See the Ladda demo
The effect I'm using is zoom-out. This works but the spinner doesn't show. Is there something I'm missing?
My button:
<button type="submit" class="ladda-button" data-style="zoom-out" name="submit">
<span class="ladda-label">Submit</span>
<span class="ladda-spinner"></span>
</button>
My JS script (taken from here):
var buttons = document.querySelectorAll( '.ladda-button' );
Array.prototype.slice.call( buttons ).forEach( function( button ) {
var resetTimeout;
button.addEventListener( 'click', function() {
if( typeof button.getAttribute( 'data-loading' ) === 'string' ) {
button.removeAttribute( 'data-loading' );
}
else {
button.setAttribute( 'data-loading', '' );
}
clearTimeout( resetTimeout );
resetTimeout = setTimeout( function() {
button.removeAttribute( 'data-loading' );
}, 3000 );
}, false );
} );
The resources I'm loading are:
268
make sure to include spin.min.js first and then ladda.min.js
122
I have this and it works:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="dist/ladda.min.css">
</head>
<body>
<button type="submit" class="ladda-button" data-style="zoom-out" name="submit">
<span class="ladda-label">Submit</span>
<span class="ladda-spinner"></span>
</button>
<script src="dist/spin.min.js"></script>
<script src="dist/ladda.min.js"></script>
<script>
Ladda.bind( '.ladda-button', { timeout: 2000 } );
</script>
</body>
</html>
If you want to stop the button manually, use one of the functions described in the documentation
9
I wanted to add this other potential cause of this, which I only just worked out after about an hour of playing around. Note this is not specifically the OP's case, but it is a cause of the spinner not displaying.
The spinner will be invisible if it's the same colour as the button! So if you use themeless.css and your button is a standard btn-default you will not see the spinner!
Changing the data-spinner-color or the colour of your button is a fix in this case.
5
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
