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-btnloda-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

原文地址:https://www.cnblogs.com/joyco773/p/10761541.html