当从服务器获取数据时,这个简单的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都支持这些动画。
图标字体来自icomoon。对于插件的jQuery UI版本,请检查loda-button-ui。