Loda Button

當從服務器獲取數據時,這個簡單的jQuery插件會動畫按鈕的圖標。單擊上面的按鈕進行演示 - 超時2秒模仿服務器負載)。css

按鈕的標記很簡單:html

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部分能夠根據須要進行更改。不可重寫位設置按鈕的動畫。git

要建立按鈕,請使用正常的jQuery樣式:github

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

要激活按鈕並啓動圖標動畫,請致電:服務器

JS
lodaBtn.lodaButton('start');

並中止動畫:app

JS
lodaBtn.lodaButton('stop');

動畫是使用CSS3的動畫,過渡和變換建立的,Chrome,Firefox,Opera和IE10都支持這些動畫。字體

你能夠在github找到一個有用的例子動畫

圖標字體來自icomoon對於插件的jQuery UI版本,請檢查loda-button-uiui

原文連接:https://www.lugolabs.com/loda-buttonspa

相關文章
相關標籤/搜索