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