Spin.js 套件

Oct 1, 2014

1 min read

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

[![](http://1.bp.blogspot.com/-frBwZAmeVK8/VCuYw17LqtI/AAAAAAAABs0/fWYi4xH2j6M/s1600/01.%E5%AE%89%E8%A3%9D%E5%A5%97%E4%BB%B6.png)](http://1.bp.blogspot.com/-frBwZAmeVK8/VCuYw17LqtI/AAAAAAAABs0/fWYi4xH2j6M/s1600/01.%E5%AE%89%E8%A3%9D%E5%A5%97%E4%BB%B6.png)

網頁中放一個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);
    });
});

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