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

最新推荐文章于 2023-01-13 10:31:21 发布

qaakd

最新推荐文章于 2023-01-13 10:31:21 发布

阅读量97

点赞数

分类专栏： web前端 ajax 文章标签： ajax not css3 加载动画

本文链接：https://blog.csdn.net/qaakd/article/details/102505980

版权

web前端同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

ajax

5 篇文章 0 订阅

订阅专栏

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

效果图：

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

<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;">已完成   0%</span>  <span class="loading2">开始获取单位数据中...</span>
</div>
</div>

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('已完成   '+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后隐藏动画

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

qaakd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单的ajax获取数据进度唯美动画 (没有使用css3与jq动画 ) 代码可以直接运行，欢迎交流，欢迎提供更高效的代码

注意：jquery.min.js请自行添加（没有可以百度下载）--><script src="../jquery.min.js"></script>效果图：<!DOCTYPE html><html><head> <title>HTML5-Video</title><meta chars...
复制链接

扫一扫