js spin 加載動畫

最近作頁面ajax加載是又用到loading動畫，還好有一個spin.js

具體的包你們能夠去http://fgnass.github.com/spin.js/下載，

若是想在頁面裏出現loading動畫，你們只要這麼作就能夠了

首先頁面裏要有：<div class="w-load"><div class="spin"></div></div>

必定要有一個包含.spin的標籤，而後調用 灑家 定義的function,就能夠了

如： smallLoadingIcon('.w-load');

具體的loading大小形狀,能夠自行調節。

function smallLoadingIcon(ele) { //小的loading圖標
    var spinner = new Spinner({
        lines: 12,
        length: 5,
        width: 2,
        radius: 4,
        color: '#333',
        speed: 1,
        trail: 50,
        shadow: false,
        hwaccel: false, 
        className: 'spinner',
        top: 0,
        left: 0
    });
    var target = $(ele+' .spin')[0];
    spinner.spin(target);
    return spinner;
}

2.///////////////

這個函數的做用是ajax調用開始前 出現loading圖標，數據加載完成後loading圖標消失，

//第一個參數爲loading圖標加載的標籤，第二個爲ajax的數據接口，第三個爲回調函數。

function loadAjaxSpin(ele, get_url, callback){      var spinner = new Spinner({        lines: 10,        length: 3,        width: 2,        radius: 4,        color: '#333',        speed: 1,        trail: 38,        shadow: false,        hwaccel: true,        className: 'spinner',        top: 'auto',        left: 'auto'    });    $(ele).show();    var target = $(ele+' .spin')[0];    spinner.spin(target);    $.ajax({        url: get_url,        success: function (data) {        callback(data);    },    complete:function(){        spinner.stop();    //用來中止loading         $(ele).hide();},    dataType: 'json'    })}