Loda Button

当从服务器获取数据时，这个简单的jQuery插件会动画按钮的图标。（单击上面的按钮进行演示 - 超时2秒模仿服务器负载）。

按钮的标记很简单：

HTML

<a href="#" class="loda-btn mb-2 mr-2">
  <span aria-hidden="true" class="loda-icon iconic-mail"></span>
  Mail
</a>

类loda-btn和loda-icon插件使用它来设置按钮的样式。同样，造型非常简单并且完成了loda-button.css。样式表的OVERRIDABLE部分可以根据需要进行更改。在不可重写位设置按钮的动画。

要创建按钮，请使用正常的jQuery样式：

JS

var lodaBtn = $('#loda-btn').lodaButton();

要激活按钮并启动图标动画，请致电：

JS

lodaBtn.lodaButton('start');

并停止动画：

JS

lodaBtn.lodaButton('stop');

动画是使用CSS3的动画，过渡和变换创建的，Chrome，Firefox，Opera和IE10都支持这些动画。

你可以在github找到一个有用的例子。

图标字体来自icomoon。对于插件的jQuery UI版本，请检查loda-button-ui。

原文链接：https://www.lugolabs.com/loda-button