2014年10月1日 星期三

spin.js 套件

spin.js是一個簡單使用的Loading的動畫,官網上有很清楚的使用範例
首先透過NuGet安裝spin.js套件

網頁中放一個div來轉圈圈,再用一個按鈕來觸發事件
<div id="div1"></div>
<input id="btn1" type="button" value="click" />

spin.js本身是無相依性的,這邊用JQuery只是用來綁定事件
呼叫Spinner物件的spin函式來啟用動畫,呼叫stop來停止動畫
$(function () {
    $("#btn1").click(function () {
        spinner = new Spinner().spin($("#div1")[0]);
        setTimeout(function () {
            spinner.stop();
        }, 1000);
    });
});




相關資料
Bootstrap button loading text
http://blog.developer.idv.tw/2014/10/bootstrap-button-loading-text.html

ladda-bootstrap 套件
http://blog.developer.idv.tw/2014/10/ladda-bootstrap.html