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