當從服務器獲取數據時,這個簡單的jQuery插件會動畫按鈕的圖標。(單擊上面的按鈕進行演示 - 超時2秒模仿服務器負載)。css
按鈕的標記很簡單: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部分能夠根據須要進行更改。在不可重寫位設置按鈕的動畫。git
要建立按鈕,請使用正常的jQuery樣式:github
var lodaBtn = $('#loda-btn').lodaButton();
要激活按鈕並啓動圖標動畫,請致電:服務器
lodaBtn.lodaButton('start');
並中止動畫:app
lodaBtn.lodaButton('stop');
動畫是使用CSS3的動畫,過渡和變換建立的,Chrome,Firefox,Opera和IE10都支持這些動畫。字體
圖標字體來自icomoon。對於插件的jQuery UI版本,請檢查loda-button-ui。ui