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.转载需注明出处，盗版必究。
