分享一款基于jQuery点击加载动画按钮特效。这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<divclass="container"><divclass="row"><divclass="col-md-6 col-md-offset-3 text-center"><p><buttonclass="btn btn-PRimary ladda-button"data-style="expand-left"><spanclass="ladda-label">expand-left</span></button><buttonclass="btn btn-primary ladda-button"data-style="expand-right"><spanclass="ladda-label">expand-right</span></button><buttonclass="btn btn-primary ladda-button"data-style="expand-up"><spanclass="ladda-label">expand-up</span></button><buttonclass="btn btn-primary ladda-button"data-style="expand-down"><spanclass="ladda-label">expand-down</span></button></p></div></div><divclass="row"><divclass="col-md-6 col-md-offset-3 text-center"><p><buttonclass="btn btn-info ladda-button"data-style="zoom-in"><spanclass="ladda-label">zoom-in</span></button><buttonclass="btn btn-info ladda-button"data-style="zoom-out"><spanclass="ladda-label">zoom-out</span></button></p></div></div><divclass="row"><divclass="col-md-6 col-md-offset-3 text-center"><p><buttonclass="btn btn-warning ladda-button"data-style="slide-left"><spanclass="ladda-label">slide-left</span></button><buttonclass="btn btn-warning ladda-button"data-style="slide-right"><spanclass="ladda-label">slide-right</span></button><buttonclass="btn btn-warning ladda-button"data-style="slide-up"><spanclass="ladda-label">slide-up</span></button><buttonclass="btn btn-warning ladda-button"data-style="slide-down"><spanclass="ladda-label">slide-down</span></button></p><p><buttonclass="btn btn-warning ladda-button"data-style="contract"><spanclass="ladda-label">contract</span></button></p></div></div><divclass="row"><divclass="col-md-6 col-md-offset-3 text-center progress-demo"><p>Built-in progress bar</p><p><buttonclass="btn btn-danger ladda-button"data-style="expand-right"><spanclass="ladda-label">expand-right</span></button><buttonclass="btn btn-danger ladda-button"data-style="expand-left"><spanclass="ladda-label">expand-left</span></button><buttonclass="btn btn-danger ladda-button"data-style="contract"><spanclass="ladda-label">contract</span></button></p></div></div><divclass="row"><divclass="col-md-6 col-md-offset-3 text-center"><p>Sizes</p><p><buttonclass="btn btn-primary btn-xs ladda-button"data-style="expand-right"data-size="xs"><spanclass="ladda-label">extra small</span></button><buttonclass="btn btn-primary btn-sm ladda-button"data-style="expand-right"data-size="s"><spanclass="ladda-label">small</span></button><buttonclass="btn btn-primary btn-lg ladda-button"data-style="expand-right"data-size="l"><spanclass="ladda-label">large</span></button></p></div></div></div>
js代码：
//Bind normal buttonsLadda.bind('div:not(.progress-demo) button', { timeout: 2000});//Bind progress buttons and simulate loading progressLadda.bind('.progress-demo button', {
callback:function(instance) {varprogress = 0;varinterval = setInterval(function() {
progress= Math.min(progress + Math.random() * 0.1, 1);
instance.setProgress(progress);if(progress === 1) {
instance.stop();
clearInterval(interval);
}
},200);
}
});
via：http://www.w2bc.com/article/56623