Question

73

Ladda: Spinner not displaying

rated 0 times [ 80] [ 7] / answers: 1 / hits: 18710 / 10 Years ago, tue, march 18, 2014, 12:00:00

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:

ladda-themeless.min.css

ladda.min.js

spin.min.js

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

khalidkendelld

Add To Favorites

Follow

Total Points: 55

Total Questions: 99

Total Answers: 77

Location: South Korea

Member since Tue, Feb 22, 2022

2 Years ago

answered 10 Years ago trayvon · Accepted Answer

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