我正在使用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 );
} );
我正在加载的资源是:
最佳答案
我有这个，它的工作原理:
<!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中描述的功能之一