Ladda是一款内置Loading指示器和进度条的提交js按钮特效插件。该js按钮特效用于制作提交按钮,在点击按钮后,按钮上会出现无限循环的Loading指示器和加载进度条效果。这种设计大大增强了用户的体验性。
你可以使用bower install ladda
或npm install ladda
来安装该js按钮插件。指示器和Ladda可以通过AMD作为一个module来调用:
// Using Require.js
define([
'ladda'
],
function
(Ladda) {
// Make Buttons Here
});
或在Common.js中,你可以:
var
ladda = require(
'Ladda/dist/ladda.min'
);
|
使用方法
该js按钮特效在使用时要引入ladda.min.js
和spin.min.js
文件,如果你想要和DEMO中一样的按钮样式,可以使用ladda.min.css
样式文件,如果你只是需要按钮的功能而不需要样式,可以使用ladda-themeless.min.css
文件。
HTML结构
Ladda js按钮特效必须在按钮上使用class ladda-button
,按钮的标签使用ladda-label
作为class。如果在DOM中不存在,ladda-label
会自动创建。下面的代码是向右扩展的进度条动画的按钮代码:
<
button
class
=
"ladda-button"
data-style
=
"expand-right"
><
span
class
=
"ladda-label"
>Submit</
span
></
button
>
|
按钮接收3个参数:
- data-style:按钮的某个样式,所有的样式前查看DEMO。
- data-color:green/red/blue/purple/mint。
- data-size: xs/s/l/xl,默认值是中等大小。
- data-spinner-size: 直径40像素,默认会依据按钮的尺寸动态调整。
- data-spinner-color: hex颜色代码或css 颜色名称。
JAVASCRIPT
如果你是在一个表单中使用该js按钮来向服务器提交信息,你可以使用bind()
方法来提交信息:
// Automatically trigger the loading animation on click
Ladda.bind(
'input[type=submit]'
);
// Same as the above but automatically stops after two seconds
Ladda.bind(
'input[type=submit]'
, { timeout: 2000 } );
|
如果你想使用javascript来控制该js按钮特效,可以使用下面的方法:
// Create a new instance of ladda for the specified button
var
l = Ladda.create( document.querySelector(
'.my-button'
) );
// Start loading
l.start();
// Will display a progress bar for 50% of the button width
l.setProgress( 0.5 );
// Stop loading
l.stop();
// Toggle between loading/not loading states
l.toggle();
// Check the current state
l.isLoading();
// Delete the button's ladda instance
l.remove();
|
页面上所用的loading加载动画可以通过下面的方法来停止:
Ladda.stopAll();
|
与jQuery结合使用
该js按钮特效可以和jQuery完美结合,如果你是在一个表单中使用该js按钮来向服务器提交信息,你可以使用ladda('bind')
方法来提交信息:
// Automatically trigger the loading animation on click
$(
'input[type=submit]'
).ladda(
'bind'
);
// Same as the above but automatically stops after two seconds
$(
'input[type=submit]'
).ladda(
'bind'
, { timeout: 2000 } );
|
如果你想使用jQuery来控制该js按钮特效,可以使用下面的方法:
// Create a new instance of ladda for the specified button
var
l = $(
'.my-button'
).ladda();
// Start loading
l.ladda(
'start'
);
// Will display a progress bar for 50% of the button width
l.ladda(
'setProgress'
, 0.5 );
// Stop loading
l.ladda(
'stop'
);
// Toggle between loading/not loading states
l.ladda(
'toggle'
);
// Check the current state
l.ladda(
'isLoading'
);
|
页面上所用的loading加载动画可以通过下面的方法来停止:
$.ladda(
'stopAll'
);
|
浏览器兼容
该js按钮特效插件在Chrome和Firefox上进行了测试。它可以很好的工作在当前最新版本的Chrome, Firefox, Safari和IE9+浏览器上。
效果: http://www.htmleaf.com/Demo/201503101495.html