学习使用spin.js 完成 loading加载动画

Spin.js 的在线设计、演示及下载地址为：http://fgnass.github.io/spin.js/

添加引用:

<!-- bootstrap-4.1.3 -->
<link rel="stylesheet" href="/Content/new_wechat/dist/bootstrap-4.1.3/css/bootstrap.min.css" />

<!-- jQuery 2.2.3 -->
<script src="/Content/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>

<!-- /bootstrap-4.1.3 -->
<script src="/Content/new_wechat/dist/bootstrap-4.1.3/js/bootstrap.min.js"></script>

<!-- layer -->
<script src="/Content/layer/layer.js"></script>

<!-- spin 添加js引用 -->
<script src="/Content/new_wechat/dist/spin-2.3.2/spin.js"></script>

spiner的父容器:

<!-- bootstrap 的 model 框 -->
<div id="spin-loading" class="modal" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog" style="height:80%;"></div>
</div>

spiner初始化参数：

//opts 可从网站在线制作
var spin_opts = {
    lines: 10, // 花瓣数目
    length: 0, // 花瓣长度
    width: 20, // 花瓣宽度
    radius: 40, // 花瓣距中心半径
    scale: 0.75,
    corners: 1, // 花瓣圆滑度 (0-1)
    opacity: 0,
    rotate: 0, // 花瓣旋转角度
    direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
    color: '#ffffff', // 花瓣颜色
    speed: 1, // 花瓣旋转速度
    trail: 60, // 花瓣旋转时的拖影(百分比)
    shadow: false, // 花瓣是否显示阴影
    hwaccel: false, //spinner 是否启用硬件加速及高速旋转
    className: 'spinner', // spinner css 样式名称
    zIndex: 2e9, // spinner的z轴 (默认是2000000000)
    top: '50%', // spinner 相对父容器Top定位 单位 px
    left: '50%',// spinner 相对父容器Left定位 单位 px
    position: 'absolute'
};


//target为显示spiner的父容器
var spin_target=document.getElementById("spin-loading")

//实例化一个spinner对象
var spinner = new Spinner(spin_opts);

function showLoading() {
    spinner.spin(spin_target);
    $("#spin-loading").modal({ backdrop: 'static', keyboard: false });
}

function closeLoading() {
    spinner.spin();
    $("#spin-loading").modal('hide');
}

请求ajax时调用spin:

//调用ajax
AjaxRequest.postJson({
                btnDom: $this, //点击查询的按钮
                url: "url", //请求的地址
                data: JsonData, //请求的参数
                success: function (data) {
                    $($this).parent().find("button").removeAttr("disabled");
                }
            });

//对ajax的封装
var AjaxRequest = {
    getJson: function (opts) {
        opts.type = "GET";
        AjaxHelp(opts);
    },
    postJson: function (opts) {
        opts.type = "POST";
        AjaxHelp(opts);
    },
};

function AjaxHelp(opts) {

    showLoading();

    $(opts.btnDom).parent().find("button").attr("disabled", "disabled");

    $.ajax({
        async: opts.async ? opts.async : true,
        type: opts.type,
        url: opts.url,
        data: opts.data,
        dataType: "JSON",
        traditional: opts.traditional ? opts.traditional : false,
        success: function (data) {
            closeLoading();
            if (opts.layer) {
                layer.msg(opts.layer.msg, { icon: 1, time: 1000 }, function () {
                    if (opts.success) {
                        opts.success(data);
                    }
                    $(opts.btnDom).parent().find("button").removeAttr("disabled");
                });
            } else {
                if (opts.success) {
                    opts.success(data);
                }
            }
        },
        error: function () {
            closeLoading();
        }
    });

}