简单的ajax获取数据进度唯美动画 (没有使用css3与jq动画 ) 代码可以直接运行,欢迎交流,欢迎提供更高效的代码

  • 时间:
  • 浏览:
  • 来源:互联网

注意:jquery.min.js请自行添加(没有可以百度下载)--><script src="../jquery.min.js"></script>

效果图:

<!DOCTYPE html>
<html>
<head>
  <title>HTML5-Video</title>
<meta charset="utf-8">
</head>
<body>

<script src="../jquery.min.js"></script>


<div id="load_box">
    <div class="bj" style="position:fixed;width:100%;height: 100%;background: #000;opacity: .1;top: 0;left: 0; "></div>
    <div class="loading" style="position:fixed;width:100%;height: 20%;background: #007239;opacity: .5;top: 50%;left: 0;margin-top:-10%;"></div>
    <div class="loading_ing" style="position:fixed;width:0%;height: 20%;background: #007239;opacity: .9;top: 50%;left: 0;margin-top:-10%;"></div>
    <div style="position:fixed;width:100%;height: 20%;background: rgba(255,255,255,0);opacity: .9;top: 50%;left: 0;margin-top:-10%;text-align: center;color: #fff;font-size: 25px;font-weight: bold;line-height: 20vh;">
        <span class="bfb_show" style="z-index: 1;position: relative;">已完成  &nbsp; 0%</span> &nbsp;<span class="loading2">开始获取单位数据中...</span>
    </div>
</div>

<script>

    var dep_array=new Array();

    dep_array=['中华人民共和国','炎黄子孙','龙的传人','中国共产党万岁','北京'];

    var times=10000;
    var bfb=(times/1000/100)*100;
    var i=0;

    var setin=setInterval(function(){
        if(i>dep_array.length-1){return;}
        $('.loading2').text(dep_array[i]+" 数据拉取中,请内心等待...");
        i++;
    },times/dep_array.length);

    var b=0;
    var setin2=setInterval(function(){
        if(b>100){return;}
        $('.bfb_show').html('已完成 &nbsp; '+b+'% ');
        $('.loading_ing').css('width',b+'%');
        b++;
    },1000/bfb-10);

    setTimeout(function(){
        clearInterval(setin);
        clearInterval(setin2);
        setTimeout(function(){
            $('.loading2').text("绘制数据报表中,请内心等待...");
            $('.bfb_show').html('');
        },500);
    },times);

</script>

</body>
</html>

js代码可以放在ajax的beforesend函数里,scuess后隐藏动画

欢迎交流,欢迎提供更高效的代码

本文链接http://element-ui.cn/article/show-155731.aspx