一个 Ajax Loading —— spin.js

菊花的制作地址：http://spin.js.org

$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(){
            //请求出错处理
        }
    });