ladda-bootstrap用將spin.js整合bootstrap，並加強功能的一個套件 官網上有很詳細的使用範例 透過NuGet就可以安裝
[](http://1.bp.blogspot.com/-IughOK48vhE/VCuejPlOPuI/AAAAAAAABtE/x5bf4Vtf7PY/s1600/01.%E5%AE%89%E8%A3%9D%E5%A5%97%E4%BB%B6.png) 可以看到套件相依於spin.js [](http://2.bp.blogspot.com/-UqPTwSVmbmM/VCuenBELR-I/AAAAAAAABtM/iBFBfK9RyUo/s1600/02.%E5%A5%97%E4%BB%B6%E7%9B%B8%E4%BE%9D%E6%80%A7.png) 使用方式是在button上，加上ladda-button的css類別，要顯示的文字加上ladda-label的css類別
<button id="btn1" class="btn btn-primary ladda-button" data-style="expand-left"> <span class="ladda-label">button</span> </button> 另外透過data-style來指定動畫效果 data-style="expand-left" data-style="expand-right" data-style="expand-up" data-style="expand-down" data-style="zoom-in" data-style="zoom-out" data-style="slide-left" data-style="slide-right" data-style="slide-up" data-style="slide-down" data-style="contract" 最後透過JavaScript來觸發，先用Ladda.create(element)來取得物件 呼叫物件的start來開始動畫 呼叫物件的stop來停止動畫
$(function () { $("#btn1").click(function () { var obj = Ladda.create(this); obj.start(); setTimeout(function () { obj.stop(); }, 1000); }); }); spin.js.2.0.1好像和ladda不太和，最好先降到spin.js 1.3版就好 相關資料 Bootstrap button loading text http://blog.developer.idv.tw/2014/10/bootstrap-button-loading-text.html
spin.js 套件 http://blog.developer.idv.tw/2014/10/spinjs.html