Geek Answers Handbook

Ladda: Spinner not showing

I use Ladda to introduce some loading effects on form buttons. Watch Ladda Demo

The effect I use is zoom-out . This works, but the spinner does not show. Is something 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 ); } );

Resources I upload:

  • ladda-themeless.min.css
  • ladda.min.js
  • spin.min.js
+7
javascript jquery
source share
4 answers

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

+7
source share

be sure to enable spin.min.js first and then ladda.min.js

+7
source share

I wanted to add this other potential reason for this, which I just worked out after about an hour of play. Note that this is not a specific case of OP, but this is the reason that the counter is not displayed.

Rotating will be invisible if the same color as the button! Therefore, if you use themeless.css , and your button is the standard btn-default , you will not see the spinner!

Changing the data-spinner-color or the color of your button is a fix in this case.

+5
source share

Do not set the text attribute on the button, it will override the spinner

delete button.setAttribute( 'data-loading', '' );

0
source share

More articles:


All Articles