Question

我使用Ladda在表单按钮上引入了一些加载效果。请参阅Ladda demo

我使用的效果是zoom-out。这有效但旋转器没有显示。我有什么遗失的吗？

我的按钮：

<button type="submit" class="ladda-button" data-style="zoom-out" name="submit">
    <span class="ladda-label">Submit</span>
    <span class="ladda-spinner"></span>
</button>

我的JS脚本（摘自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 );

} );

我加载的资源是：

ladda-themeless.min.css
ladda.min.js
spin.min.js

Answer 1

我有这个并且它有效：

<!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>

如果您想手动停止按钮，请使用documentation

中描述的功能之一

Answer 2

请务必先包含var myVar: String? = "Hello" myVar! += " world!"，然后再包含String

Answer 3

我想补充一下这个其他潜在原因，我只是在玩了大约一个小时之后才解决这个问题。请注意，这不是OP的具体情况，但它是导致旋转器不显示的原因。

如果旋转器的颜色与按钮颜色相同，则它将不可见！因此，如果您使用themeless.css并且您的按钮是标准btn-default，则您将看不到微调器！

在这种情况下，更改data-spinner-color或按钮的颜色是一种解决方法。

Answer 4

不要在按钮上设置任何文本属性，它将覆盖微调器

删除button.setAttribute( 'data-loading', '' );

Ladda：Spinner没有显示

4 个答案: