jquery按钮加载动画插件loda-button

loda-button是一款按钮加载动画的jquery插件，使用CSS3创建动画转场，当点击按钮后，数据与服务端通信时出现加载动画，大大地提高交互体验性。由于使用的是CSS3，因此只支持现代浏览器,即IE10+，当然你可以使用html5.js来实现低版本IE支持。

使用方法

引入核心文件

< link  rel = "stylesheet"  href = "icomon/style.css"  />
< link  rel = "stylesheet"  href = "loda-button.css"  />
< script  type = "text/javascript"  src = "vendor/jquery-1.9.1.js" > script >
< script  type = "text/javascript"  src = "loda-button.js" > script >

写入HTML代码

< a  href = "#"  class = "loda-btn" >
    < span  aria-hidden = "true"  class = "loda-icon icofont-mail" > span >
    Mail
a >

按钮使用了loda-btn与loda-icon两个样式类，样式类非常简单，写在了loda-button.css。可以重写的部份样式类你可以根据你的需求来重写，而按钮动画部分不可重写。

写入JS初始化插件

var  lodaBtn = $( '#loda-btn' ).lodaButton();  //实例化
lodaBtn.lodaButton( 'start' );  //开始按钮动画
lodaBtn.lodaButton( 'stop' );  //结束按钮动画

转载请注明：jQ酷 » jquery按钮加载动画插件loda-button