jquery实现页面等待加载“转圈圈”效果

A little of BB：看了不少前端框架，寻思着自己diy封一个加载转圈圈的效果，以后在项目上节省时间(“懒”就一个字)，话不多说，ctrl v出来见真章
1.js全部源码，loading.js

/***  数据加载动态圈风格* @param property 参数对象*  property 参数对象详细属性设置↓* type (start,stop) 加载或停止转圈* content 加载提示内容* shadowColor 背景阴影颜色-建议使用带透明的颜色* loadingBoxColor  加载背景色* loadingPointColor  转圈点颜色* loadingContentColor  加载提示内容字体颜色*/function initLoading(property) {$("body .loading-box-shadow-omg").remove();//清除加载图层if(property.type=="stop"){return;}var nodeHtml = '<div class="loading-box-shadow-omg"><div class="loading-box">';nodeHtml += '<div class="loading-circle"></div><div class="loading-content"></div></div></div>';$("body").append(nodeHtml);//加载布局元素var html = '<div style="top: 5%;left: 53%;width: 5px;height: 5px;"></div>';html += '<div style="top: 11%;left: 30%;width: 7px; height: 7px;"></div>';html += '<div style="top: 26%;left: 12%;width: 9px;height: 9px;"></div>';html += '<div style="top: 48%;left: 7%;width: 9px;height: 9px;"></div>';html += '<div style="top: 70%;left: 15%;width: 9px;height: 9px;"></div>';html += '<div style="top: 85%;left: 33%;width: 9px;height: 9px;"></div>';html += '<div style="top: 89%;left: 54%;width: 9px;height: 9px;"></div>';html += '<div style="top: 80%;left: 75%;width: 9px;height: 9px;"></div>';$("body .loading-circle").html(html);var content = "正在加载中...";//提示内容if(property.content){content = property.content;}$("body .loading-content").text(content);var shadowColor = "#211f1f5c";//阴影颜色if(property.shadowColor){shadowColor = property.shadowColor;$('body .loading-box-shadow-omg').css("background-color",shadowColor);}var loadingBoxColor = "white";//加载框背景色if(property.loadingBoxColor){loadingBoxColor = property.loadingBoxColor;$('body .loading-box-shadow-omg .loading-box').css("background-color",loadingBoxColor);}var loadingPointColor = "#292961";//动态点颜色if(property.loadingPointColor){loadingPointColor = property.loadingPointColor;$('body .loading-box-shadow-omg .loading-circle>div').css("background-color",loadingPointColor);}var loadingContentColor = "rebeccapurple";//提示内容颜色if(property.loadingContentColor){loadingContentColor = property.loadingContentColor;$('body .loading-box-shadow-omg .loading-content').css("color",loadingContentColor);}};initLoading({type:"start",content:"loading...",// shadowColor:"grey",// loadingBoxColor:"yellow",// loadingPointColor:"green",// loadingContentColor:"red"
});

2.css全部源码,loading.css(ps:gif图都不用找UI了，嘿嘿，不过肯定没UI的精美)

html body{margin: 0;padding: 0;
}/*动态加载圈-loading-start*/
body .loading-box-shadow-omg{width: -webkit-fill-available;height: -webkit-fill-available;background-color: #211f1f5c;position: absolute;top: 0;z-index: 9999999;
}.hidden{display: none!important;
}body .loading-box-shadow-omg .loading-box{background-color: white;border-radius: 5px;position: absolute;top: 20%;left: 40%;width: 20%;height: 25%;
}body .loading-box-shadow-omg .loading-box .loading-circle{width: 80px;height: 80px;background-color: transparent;position: absolute;left: 35%;top: 10%;animation: init-circle 1s linear infinite;
}body .loading-box-shadow-omg .loading-box .loading-content{position: absolute;bottom: 5%;font-weight: bold;color: rebeccapurple;width: 100%;text-align: center;
}body .loading-box-shadow-omg .loading-box .loading-circle>div{background-color: #292961;border-radius: 20px;position: absolute;
}@keyframes init-circle {from{transform: rotate(360deg);}to{transform: rotate(0deg);}
}
/*动态加载圈-loading-stop*/

3.html全部源码,loading.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hello</title><link rel="stylesheet" href="loading.css">
</head>
<body>
</script>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="loading.js"></script>
</html>

3.效果图

4.调用initLoading方法时，可以自定义阴影遮盖颜色，转圈圈颜色等设置，属性设置方面，见js注释

initLoading({type:"start",content:"loading...",// shadowColor:"grey",// loadingBoxColor:"yellow",// loadingPointColor:"green",// loadingContentColor:"red"
});

5.源码下载：https://download.csdn.net/download/qq_40000351/11972437

6.我没秃，但我始终有一颗变强的心！
7.转载需注明出处，盗版必究。

jquery实现页面等待加载“转圈圈”效果相关推荐

html加载页面转圈圈怎么打,js实现等待加载“转圈圈”效果
完美实现加载转圈圈效果: js代码: function showLoading(show){if(show){document.getElementById("over").sty ...
js等待加载转圈圈效果
首先引入js文件,jquery.js和spin.js css文件如下: <style type="text/css"> #foo ...
QTP的那些事---页面弹出框的处理，页面等待加载的处理
处理方法:先判断父类对象是否存在,如果存在,判断相关的static文本对象是否存在,如果存在,则点击弹出框中的按钮即可: 例如如下的代码: 设置循环判断dialog对象是否存在,如果存在,就去点击相关 ...
jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
jquery 当页面图片加载之后_在浏览器地址栏输入地址到页面渲染完成发生了什么？（下）...
上一篇讲了前三步,本篇从第四步开始.下面是正文: 四.进行tcp三次握手,建立tcp连接. 简述一下,第三步我们找到了目标ip,并获得了服务器ip的mac地址.此时浏览器就会请求和服务器连接,用来传输 ...
loading--加载转圈圈效果
vue–loading–加载转圈圈效果哈哈哈哈哈,固定的就很糟糕,使用的时候需要自己改,还好我自己不需要分为:large(大) medium(中) small(小):由于我暂时不需要,large没 ...
C语言界面列表的滑动效果,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/ ...
JQuery 在DIV中加载页面
JQuery 在DIV中加载页面在做页面设计的时候,有时需要在一个页面上引入另一个页面,用jquery比较简单 index.html <!DOCTYPE html PUBLIC "- ...
好看的html登录遮罩提示加载中,jQuery炫酷页面预加载Loading特效插件
fakeLoader.js是一款轻量级的 jQuery 炫酷页面预加载Loading特效插件.它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程. Bower安装 bower ...

jquery实现页面等待加载“转圈圈”效果

jquery实现页面等待加载“转圈圈”效果

jquery实现页面等待加载“转圈圈”效果相关推荐

最新文章

热门文章