带loading指示器的js按钮动画特效

本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/jQuery/Buttons-Icons/201503101494.html



简要教程

Ladda是一款内置Loading指示器和进度条的提交js按钮特效插件。该js按钮特效用于制作提交按钮，在点击按钮后，按钮上会出现无限循环的Loading指示器和加载进度条效果。这种设计大大增强了用户的体验性。

你可以使用

bower
install ladda

或

npm
install ladda

来安装该js按钮插件。指示器和Ladda可以通过AMD作为一个module来调用：

或在Common.js中，你可以：

 使用方法

该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

会自动创建。下面的代码是向右扩展的进度条动画的按钮代码：

按钮接收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()

方法来提交信息：

如果你想使用javascript来控制该js按钮特效,可以使用下面的方法：

页面上所用的loading加载动画可以通过下面的方法来停止：


 与jQuery结合使用

该js按钮特效可以和jQuery完美结合，如果你是在一个表单中使用该js按钮来向服务器提交信息，你可以使用

ladda('bind')

方法来提交信息：

如果你想使用jQuery来控制该js按钮特效,可以使用下面的方法：

页面上所用的loading加载动画可以通过下面的方法来停止：

 浏览器兼容

该js按钮特效插件在Chrome和Firefox上进行了测试。它可以很好的工作在当前最新版本的Chrome, Firefox, Safari和IE9+浏览器上。

效果： http://www.htmleaf.com/Demo/201503101495.html