spin.js

$ajax提交，菊花加載的方式和位置：

    $.ajax({
        type: "get",
        url: "http://www.xxx.com/test.html",
        beforeSend: function(XMLHttpRequest){
            //ShowLoading();菊花加載事件
        },

        success: function(data, textStatus){
            //do something
        },
        complete: function(XMLHttpRequest, textStatus){
            //HideLoading();隱藏菊花
        },
        error: function(){
            //請求出錯處理
        }
    });

使用的菊花控件，spin.js：

http://spin.js.org

可以在此網址調好配置；下面的再復制過來。

使用方法：

    function showSpin(){
        var spinnerOpts = {
                lines: 11 // 共有幾條線組成
                , length: 13 // 每條線的長度
                , width: 8 // 每條線的長度
                , radius: 19 // 內圈的大小
                , scale: 0.5 // Scales overall size of the spinner
                , corners: 0.1 // 圓角的程度
                , color: '#000' // #rgb or #rrggbb or array of colors
                , opacity: 0.1 // Opacity of the lines
                , rotate: 18 // 整體的角度（因為是個環形的，所以角度變不變其實都差不多）
                , direction: 1 // 1: clockwise, -1: counterclockwise
                , speed: 0.8 // 速度：每秒的圈數
                , trail: 55 //  高亮尾巴的長度
                , fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
                , zIndex: 2e9 // z-index的值 2e9（默認為2000000000
                , className: 'spinner' // The CSS class to assign to the spinner
                , top: '50%' // Top position relative to parent
                , left: '50%' // Left position relative to parent
                , shadow: false // 是否要陰影
                , hwaccel: false // 是否用硬件加速
                , position: 'absolute' // Element positioning
        };
        var spinTarget = document.getElementById('main');
        new Spinner(spinnerOpts).spin(spinTarget);
    }

main為加載顯示的區域。

ajax調用：

    $.ajax({
        type: "get",
        url: "http://www.xxx.com/test.html",
        beforeSend: function () {
            showSpin();
        },
        success: function(data, textStatus){
            //do something
        },
        complete: function () {
            $(".spinner").hide();
        },
        error: function(){
            //請求出錯處理
        }
    });