登录注册

Ladda for Bootstrap 3按钮加载进度插件

插件特效
2026-07-25 23:36 2 次浏览 • 0 次下载 7.2KB
Ladda for Bootstrap 3按钮加载进度插件

使用方法

添加bootstrap.css样式,spin.min.js和ladda.min.js到您的页面

1
2
3
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="dist/spin.min.js"></script>
<script src="dist/ladda.min.js"></script>


然后添加一个按钮并加入样式:

1
<button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>


或者使用“a”标签:

1
<a href="#" class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></a>


你可以设置data-style属性来选择风格:

1
2
3
4
5
6
7
8
9
10
11
data-style="expand-left"
data-style="expand-left"
data-style="expand-right"
data-style="expand-up"
data-style="zoom-in"
data-style="zoom-out"
data-style="slide-left"
data-style="slide-right"
data-style="slide-up"
data-style="slide-down"
data-style="contract"


你可以通过设置data-size属性选择控制大小:

1
2
3
data-size="xs"
data-size="s"
data-size="l"


你可以选择的颜色微调器通过设置data-spinner-color属性(十六进制代码):

1
data-spinner-color="#FF0000"


与Javascript控制UI状态:

1
Ladda.bind( 'input[type=submit]' );


使用AJAX表单时,可以使用下面的语法:

1
<a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"><span class="ladda-label">Submit form</span></a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
$('#form-submit').click(function(e){
e.preventDefault();
var l = Ladda.create(this);
l.start();
$.post("your-url",
{ data : data },
function(response){
console.log(response);
}, "json")
.always(function() { l.stop(); });
return false;
});
});

其他方法可以通过Javascript

评论