我正在使用Ladda在我的表单按钮上引入一些加载效果.请参阅Ladda演示
我正在使用的效果是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脚本(取自此处):
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 );
} );
我正在加载的资源是:
我有这个,它的工作原理:
<!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>
如果要手动停止按钮,请使用文档中描述的功能之一
我想补充一下这个其他潜在的原因,我只是在玩了大约一个小时之后就解决了.请注意,这不是OP的具体情况,但它是微调器不显示的原因.
如果与按钮颜色相同,则微调器将不可见!因此,如果您使用themeless.css并且您的按钮是标准,btn-default您将看不到微调器!
data-spinner-color在这种情况下,更改按钮或颜色是一个修复.