Ajax Loading插件-spin.js

Ajax Loading插件-spin.js

GitHub源码演示 https://github.com/sunnyguyan/Js_PlugIn_Demo/tree/master/spin

ajax异步请求时候,一般都用gif小图片制作Ajax loading.

spin.js,大小只有5k,没有任何外部图片,任何外部css样式.就可以实现Ajax Loading.

静态HTML代码:

<style>
body {
    margin:0px auto;
    background-color:#0F212E;
}

#firstDiv
{   
    margin:40px auto 5px;
    width:300px;
    height:300px;
    border-style: solid;
    border-width: 1px;
    border-color: #DF7401;
    background: #EFF5FB;
    text-align: center;
    line-height: 300px;
    color:#2E2EFE;
}

#secondDiv
{
    margin: 10px,0px;
    text-align:center;
}

.btnStyle
{
  height:30px;
  width:100px;
  font-size: 12px;
  color: #ffffff;  
  vertical-align: top;
  background-color: #FF8000;
  border: 1px solid #333434;
}
</style>
<div id="firstDiv">
        </div>
        <div id="secondDiv">
            <input id="btnRequest" type="button" value="请求数据" class="btnStyle" />
</div>

其中opts样式可在 http://spin.js.org/ 在线制作与测试

var opts = {            
                lines: 13, // 花瓣数目
            length: 20, // 花瓣长度
            width: 10, // 花瓣宽度
            radius: 30, // 花瓣距中心半径
            corners: 1, // 花瓣圆滑度 (0-1)
            rotate: 0, // 花瓣旋转角度
            direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
            color: '#5882FA', // 花瓣颜色
            speed: 1, // 花瓣旋转速度
            trail: 60, // 花瓣旋转时的拖影(百分比)
            shadow: false, // 花瓣是否显示阴影
            hwaccel: false, //spinner 是否启用硬件加速及高速旋转            
            className: 'spinner', // spinner css 样式名称
            zIndex: 2e9, // spinner的z轴 (默认是2000000000)
            top: 'auto', // spinner 相对父容器Top定位 单位 px
            left: 'auto', // spinner 相对父容器Left定位 单位 px
            position: 'relative', // element position
            progress: true,      // show progress tracker
            progressTop: 0,       // offset top for progress tracker
            progressLeft: 0       // offset left for progress tracker
            };

            var spinner = new Spinner(opts);

mock模拟ajax数据

//调用mock方法模拟数据
    Mock.mock(
        'http://mockjs', {
            "userName" : '@name',     //模拟名称
            "age|1-100":100,          //模拟年龄(1-100)
            "color"    : "@color",    //模拟色值
            "date"     : "@date('yyyy-MM-dd')",  //模拟时间
            "url"      : "@url()",     //模拟url
            "content"  : "@cparagraph()" //模拟文本
        }
    );

最后通过ajax回调成功

$(document).ready(function () {
            $("#btnRequest").bind("click", function () {
                ajaxRequestData();
            })
        })
         
          function ajaxRequestData(){
            $.ajax({
                type: "GET",
                timeout: 10000,
                dataType: "json",
                url: "http://mockjs",
                beforeSend: function () {
                    $("#mb").css("display","block");
                    //异步请求时spinner出现
                    $("#firstDiv").text("");
                    var target = $("#firstDiv").get(0);
                    spinner.spin(target);
                    $("#mb").css("display","none");
   
                },
                success: function (msg) {
                    $("#firstDiv").text(msg);
                    //关闭spinner  
                    spinner.spin();
                },
                error: function (e, jqxhr, settings, exception) {
                    $("#firstDiv").text("请求发生错误...");
                    //关闭spinner  
                    spinner.spin();
                }
            })
        }