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

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+浏览器上。