使用css+js来实现加载中效果
css3中使用-webkit-animation: load 2.08s linear infinite;和-webkit-transform新属性结合使用。
js中方式有两种：截图说明
两个方法的思路都是在ajax请求的过程，让我们自己写的遮罩div显示，在数据请求结束后使遮罩div消失，从而实现ajax请求的加载中效果。
方法二：
源代码附上：
.mark{
background: #000;
opacity: .3;
width: 1836px;
height: 870px;
display: none;
position: absolute;
left: 40px;
top: 120px;
z-index:1000;
}
.mark p {
display: inline-block;
position:absolute;
top:50%;
left: 50%;
margin-left: -43px;
margin-top: -15px;
font-size: 18px;
}
.loadEffect {
width: 100px;
height: 100px;
margin: 0 auto;
position: relative;
}
.loadEffect div{
width: 100%;
height:80%;
position: absolute;
margin-top: 300px;
-webkit-animation: load 2.08s linear infinite;
}
.loadEffect div span{
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
background: lightgreen;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
}
@-webkit-keyframes load{
0%{
-webkit-transform: rotate(0deg);
}
10%{
-webkit-transform: rotate(45deg);
}
50%{
opacity: 1;
-webkit-transform: rotate(160deg);
}
62%{
opacity: 0;
}
65%{
opacity: 0;
-webkit-transform: rotate(200deg);
}
90%{
-webkit-transform: rotate(340deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
.loadEffect div:nth-child(1){
-webkit-animation-delay:0.2s;
}
.loadEffect div:nth-child(2){
-webkit-animation-delay:0.4s;
}
.loadEffect div:nth-child(3){
-webkit-animation-delay:0.6s;
}
.loadEffect div:nth-child(4){
-webkit-animation-delay:0.8s;
}
$("#compute").off("click").click(function(e){
var queryObj = getParams();
var zhezhaoHeight = $(".zhezhao fieldset:nth-child(1)").height() + $(".zhezhao fieldset:nth-child(2)").height();
console.log(zhezhaoHeight);
var oMark=$(".mark","#myDiv01");
oMark.css("height",zhezhaoHeight);
oMark.css("display","block");
$.ajax({
url:'/pwznygpt/dataService/rest/algService/getAlgValueByParams',
type:'POST',
async:true,
dataType:'json',
contentType:'application/json;charset=utf-8',
data:JSON.stringify({
algId: algId,
orgNo: orgNo,
gdlx: gdlx,
gdqy: gdqy,
filterParams:queryObj
}),
success:function(data,status){
// oMark.style.display="none";
oMark.css("display","none");
$("#algValue").val(data.data);
}
});
});
网友评论