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

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

使用方法

引入核心文件

1 2 3 4

<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代码

1 2 3 4

<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初始化插件

1 2 3

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

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